删除 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" class 的最内层跨度。另一个在 "festi-cart-product-price" classed 跨度之后什么都没有。

我正在尝试使用 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

这个怎么样。

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

未测试。

来自这个问题：How to select elements which do not have a specific child element with JQuery 这类 'descendant without feature' 问题值得一读。

Answer 2

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

Answer 3

使用.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>

Answer 4

你太接近了，你的select还是有效的和select没有span的festi-cart-product-price的：

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

您只需使用 closest() 进入 parents tr 然后隐藏它们 :

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

使用setTimeout()检查This 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>

Answer 5

$('.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>

删除 jquery 中所有不具有特定后代元素的元素

Remove all element that does not have specific descendandt element in jquery

javascript

jquery

jquery-selectors