使用jQuery删除所有没有特定子元素的元素

Question

所以，我有以下标记：

<div class="festi-cart-products-content">
    <table class="festi-cart-list">
        <tbody>
            <tr class="festi-cart-item ">
                <td class="festi-cart-product-img">
                </td>
                <td class="festi-cart-product-title">
                    <a class="festi-cart-title" href="">product name</a><br>
                    <span class="festi-cart-product-price">
                        <span class="woocommerce-Price-amount amount"></span>
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

有多个tr元素，但只有一些内部最深层的span具有“woocommerce-Price-amount”类。其他的在“festi-cart-product-price”类的span后面没有内容。

我正在尝试使用jQuery删除所有不包含“woocommerce-Price-amount” span的tr元素。

jQuery( document ).ajaxComplete(function() {

    jQuery(".festi-cart-product-price:not(:has(>span))").each(function(){
        jQuery(this).parent('tr.festi-cart.item').hide();
    });

});

我一直在尝试使用:not选择器，但似乎没有产生任何结果。我真的不确定哪里出错了。

你们中有人能发现我的代码哪里出了问题吗？或者这是一个对于简单解决方案来说完全绝望的方法？

- Emil Østervig

---

错别字，tr 上的类应该是 festi-cart-item，而不是 festi-cart.item。 - Rory McCrossan

$('.festi-cart-product-price:not(:has(.woocommerce-Price-amount))').closest('.festi-cart-item').hide(); - Rayon

Answer 1

使用.filter函数来匹配符合特定要求的元素。

使用$('tr').find('.woocommerce-Price-amount').length > 0检查元素是否存在于tr中。

然后只需对筛选出来的元素执行.hide()（或.remove()）操作即可。

$(document).ready(function() {
  var hasWoo = $('.festi-cart-list tr').filter(function() {
    return $(this).find('.woocommerce-Price-amount').length !== 0;
  });

  hasWoo.hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
  <table class="festi-cart-list">
    <tbody>
      <tr class="festi-cart-item ">
        <td class="festi-cart-product-img">
        </td>
        <td class="festi-cart-product-title">
          <a class="festi-cart-title" href="">product name</a>
          <br>
          <span class="festi-cart-product-price">
                        <span class="woocommerce-Price-amount amount">WOO</span>
          </span>
        </td>
      </tr>
      <tr class="festi-cart-item ">
        <td class="festi-cart-product-img">
        </td>
        <td class="festi-cart-product-title">
          <a class="festi-cart-title" href="">product name</a>
          <br>
          <span class="festi-cart-product-price">
                        <span class="woocommerce-Price-amount amount">WOO</span>
          </span>
        </td>
      </tr>
      <tr class="festi-cart-item ">
        <td class="festi-cart-product-img">
        </td>
        <td class="festi-cart-product-title">
          <a class="festi-cart-title" href="">product name</a>
          <br>
          <span class="festi-cart-product-price">
                      EMPTY
                    </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

- Justinas

---

谢谢，关于过滤功能的见解很好。我需要针对所有非 WooCommerce 类元素进行定位，所以这有点相反但仍然是一个不错的解决方案。也许以后会尝试翻转它并使用它，但现在我使用了其中的另一个。再次感谢。 - Emil Østervig

Answer 2

你需要使用jquery的.closest()方法，而不是.parent()方法。

- Farid Imranov

---

感谢您的输入。 - Emil Østervig

Answer 3

$('.btn').click(function(){
$('.festi-cart-item').each(function(){
var price = $(this).find('.festi-cart-product-price').children().hasClass('woocommerce-Price-amount');
  if(!price)
    $(this).hide();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
    <table class="festi-cart-list">
        <tbody>
            <tr class="festi-cart-item ">
                <td class="festi-cart-product-img">
                </td>
                <td class="festi-cart-product-title">
                    <a class="festi-cart-title" href="">product name</a><br>
                    <span class="festi-cart-product-price">
                        <span class="woocommerce-Price-amount"></span>
                    </span>
                </td>
            </tr>
  <tr class="festi-cart-item ">
                <td class="festi-cart-product-img">
                </td>
                <td class="festi-cart-product-title">
                    <a class="festi-cart-title" href="">product name</a><br>
                    <span class="festi-cart-product-price">
                       
                    </span>
                </td>
            </tr>    
          <tr class="festi-cart-item ">
                <td class="festi-cart-product-img">
                </td>
                <td class="festi-cart-product-title">
                    <a class="festi-cart-title" href="">product name</a><br>
                    <span class="festi-cart-product-price">
                       
                    </span>
                </td>
            </tr>    
        </tbody>
    </table>
</div>

<button class="btn">remove</button>

- Aqueel Aboobacker VP

---

谢谢，第一次尝试就完美地运行了。只是将点击处理程序更改为ajaxComplete的文档 :)。 - Emil Østervig

Answer 4

这个怎么样？

$("tr:not(:has(>.woocommerce-Price-amount))").hide() 

未经测试。

来源于这个问题：如何使用JQuery选择没有特定子元素的元素，这是一个关于“没有特定功能的后代”问题值得一读的问题。

- Vanquished Wombat

---

我从来没有真正掌握:not功能，所以最终我采用了其他答案之一。不管怎样，还是谢谢你的参与！ - Emil Østervig

Answer 5

你离成功很近了，你的选择器是有效的，并且选择了没有标签的festi-cart-product-price：

$(".festi-cart-product-price:not(:has('>span'))")

你只需要使用closest()方法找到父级的tr，然后隐藏它们即可：

selector.closest('tr').hide();

请使用setTimeout()检查这个fiddle以查看效果。

希望这可以帮助你。

$(function() {
  var selector = $(".festi-cart-product-price:not(:has('>span'))");

  selector.closest('tr').hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
  <table class="festi-cart-list" border=1>
    <tbody>
      <tr class="festi-cart-item ">
        <td class="festi-cart-product-img"> IMAGE 1
        </td>
        <td class="festi-cart-product-title">
          <a class="festi-cart-title" href="">product name</a><br>
          <span class="festi-cart-product-price">
            <span class="woocommerce-Price-amount amount">p1</span>
          </span>
        </td>
      </tr>
      <tr class="festi-cart-item ">
        <td class="festi-cart-product-img"> IMAGE 2
        </td>
        <td class="festi-cart-product-title">
          <a class="festi-cart-title" href="">product name</a><br>
          <span class="festi-cart-product-price">
          </span>
        </td>
      </tr>
      <tr class="festi-cart-item ">
        <td class="festi-cart-product-img"> IMAGE 3
        </td>
        <td class="festi-cart-product-title">
          <a class="festi-cart-title" href="">product name</a><br>
          <span class="festi-cart-product-price">
          </span>
        </td>
      </tr>
      <tr class="festi-cart-item ">
        <td class="festi-cart-product-img"> IMAGE 4
        </td>
        <td class="festi-cart-product-title">
          <a class="festi-cart-title" href="">product name</a><br>
          <span class="festi-cart-product-price">
            <span class="woocommerce-Price-amount amount">p4</span>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

- Zakaria Acharki

---

感谢您的解释和故障排除。最终我使用了另一个答案，但还是非常感谢您的建议！ - Emil Østervig