I am trying to do a jQuery remove based on a condition

Question

So I want to remove an entire div and its content by using jquery

the value of the region will be entered into jquery after running a javascript function to find IP address here is the javascript find region from IP address

$(document).ready(function() { $.get("https://geo.ipify.org/api/v1?apiKey=", function(data) {
$("body").append("<pre>" + JSON.stringify(data.location.region, "", 2) + "</pre>");

So if data.location.region is texas then I want all the div class=msa with region values not equal to texas to disappear.

So I need a jquery function I guess that takes in the region and does a removeClass.

Here is the sample body `

<div class="row m-s-a _hidden">
    <table>
        <tr>
            <td class="for-sale-heading">
                <h4>Auction:&nbsp;</h4>
            </td>
            <td class="for-sale-heading">
                <h4>Hard rock Cafe</h4>
            </td>
        </tr>
        <tr>
            <td class="for-sale-heading">
                <h4>Location:&nbsp;</h4>
            </td>
            <td class="for-sale-heading">
                <h4>4641 Production unit 42 Mt. Clemens, <span `enter code here`class="region">Michigan</span> 48043</h4>
            </td>
        </tr>
    </table>
</div>
<div class="row m-s-a _hidden">`enter code here`
    <table>
        <tr>
            <td class="for-sale-heading">
                <h4>Auction:&nbsp;</h4>
            </td>
            <td class="for-sale-heading">
                <h4>Hard rock Cafe</h4>
            </td>
        </tr>
        <tr>
            <td class="for-sale-heading">
                <h4>Location:&nbsp;</h4>
            </td>
            <td class="for-sale-heading">
                <h4>4641 Production unit 42 Mt. Clemens, <span class="region">Utah</span> 48043</h4>
            </td>
        </tr>
    </table>
</div>
<div class="row m-s-a _hidden">
    <table>
        <tr>
            <td class="for-sale-heading">
                <h4>Auction:&nbsp;</h4>
            </td>
            <td class="for-sale-heading">
                <h4>Hard rock Cafe</h4>
            </td>
        </tr>
        <tr>
            <td class="for-sale-heading">
                <h4>Location:&nbsp;</h4>
            </td>
            <td class="for-sale-heading">
                <h4>4641 Production unit 42 Mt. Clemens, <span class="region">Texas</span> 48043</h4>
            </td>
        </tr>
    </table>
</div>

Answer 1

You could do it like this:

 $(document).ready(function() { $(".region").each(function() { if ($(this).text().= "Texas") { $(this).closest(".msa");remove(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row msa _hidden"> <table> <tr> <td class="for-sale-heading"> <h4>Auction:&nbsp;</h4> </td> <td class="for-sale-heading"> <h4>Hard rock Cafe</h4> </td> </tr> <tr> <td class="for-sale-heading"> <h4>Location:&nbsp;</h4> </td> <td class="for-sale-heading"> <h4>4641 Production unit 42 Mt. Clemens, <span class="region">Michigan</span> 48043</h4> </td> </tr> </table> </div> <div class="row msa _hidden"> <table> <tr> <td class="for-sale-heading"> <h4>Auction:&nbsp;</h4> </td> <td class="for-sale-heading"> <h4>Hard rock Cafe</h4> </td> </tr> <tr> <td class="for-sale-heading"> <h4>Location:&nbsp;</h4> </td> <td class="for-sale-heading"> <h4>4641 Production unit 42 Mt. Clemens, <span class="region">Utah</span> 48043</h4> </td> </tr> </table> </div> <div class="row msa _hidden"> <table> <tr> <td class="for-sale-heading"> <h4>Auction:&nbsp;</h4> </td> <td class="for-sale-heading"> <h4>Hard rock Cafe</h4> </td> </tr> <tr> <td class="for-sale-heading"> <h4>Location:&nbsp;</h4> </td> <td class="for-sale-heading"> <h4>4641 Production unit 42 Mt. Clemens, <span class="region">Texas</span> 48043</h4> </td> </tr> </table> </div>

This would have to be adjusted to your needs, eg instead of comparing the text of the <span class="region"> to "Texas" you would compare it to data.location.region or the <pre> in which you added this region in your example - $("pre").text() , in case it's the only <pre> on your page.