javascript - 删除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 元素，但只有其中一些具有“woocommerce-Price-amount”类的最内层跨度。另一个在“festi-cart-product-price”分类跨度之后什么都没有。

我正在尝试使用 jQuery 删除其中没有“woocommerce-Price-amount”跨度的所有 tr 元素。

jQuery( document ).ajaxComplete(function() {

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

});

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

你们中的任何人都可以发现我的代码哪里出了问题，或者它是否是一种完全没有希望的简单解决方案？

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>