how to remove specific element when parent has an element with jQuery?

Question

this is my code:

 jQuery('.page-id-9.woocommerce td.tdclass:not(.variation)').remove();

 td{ border:1px solid #ccc; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <body class="page-id-9"> <table class="woocommerce"> <tbody> <tr> <td class="tdclass">#1</td> <td class="tdclass"><span class="other_item">wallet</span></td> <td class="tdclass">$45</td> </tr> <tr> <td class="tdclass">#2</td> <td class="tdclass"> <dl class="variation"> <dt class="variation-">Select Category:</dt> <dd class="variation-"><p>Category 1</p></dd> <dt class="variation-">Select Product:</dt> <dd class="variation-"><p>product 1</p></dd> <dt class="variation-">Link:</dt> <dd class="variation-"><p><a href="#" rel="nofollow">Link</a></p></dd> </dl> <span class="other_item">wallet2</span> </td> <td class="tdclass">$35</td> </tr> </tbody> </table> </body>

I want to check if td element has dl class="variation" then remove "other_item" tag.

in my code, wallet2 Should be removed. But all elements have been removed!

Answer 1

Use has() method (or :has() selector) to filter the ones where the desired class exists and then find() to remove the other span

jQuery('.page-id-9 .woocommerce td.tdclass')
        .has('dl.variation')
        .find('.other_item')
        .remove();

Or perhaps simpler, target the variation class and use siblings()

jQuery('.page-id-9 .woocommerce td.tdclass dl.variation')
         .siblings('.other_item')
         .remove();

Example using has()

 jQuery('.page-id-9.woocommerce td.tdclass').has('dl.variation').find('.other_item').remove();

 td{ border:1px solid #ccc; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <body class="page-id-9"> <table class="woocommerce"> <tbody> <tr> <td class="tdclass">#1</td> <td class="tdclass"><span class="other_item">wallet</span></td> <td class="tdclass">$45</td> </tr> <tr> <td class="tdclass">#2</td> <td class="tdclass"> <dl class="variation"> <dt class="variation-">Select Category:</dt> <dd class="variation-"><p>Category 1</p></dd> <dt class="variation-">Select Product:</dt> <dd class="variation-"><p>product 1</p></dd> <dt class="variation-">Link:</dt> <dd class="variation-"><p><a href="#" rel="nofollow">Link</a></p></dd> </dl> <span class="other_item">wallet2</span> </td> <td class="tdclass">$35</td> </tr> </tbody> </table> </body>

how to remove specific element when parent has an element with jQuery?

Question

1 answers

solution1
2 ACCPTED 2020-06-28 00:24:40

how to remove specific element when parent has an element with jQuery?

Question

1 answers

solution1 2 ACCPTED 2020-06-28 00:24:40

solution1
2 ACCPTED 2020-06-28 00:24:40