删除jquery中没有特定后代元素的所有元素答案

【问题标题】：Remove all element that does not have specific descendandt element in jquery删除jquery中没有特定后代元素的所有元素
【发布时间】：2016-11-09 22:39:59
【问题描述】：

所以我有以下标记：

<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 选择器，但它似乎没有产生任何结果。我真的不知道哪里出了问题。

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

【问题讨论】：

错字，tr 上的类是festi-cart-item，而不是festi-cart.item
$('.festi-cart-product-price:not(:has(.woocommerce-Price-amount))').closest('.festi-cart-item').hide();

标签： javascript jquery jquery-selectors

【解决方案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>

【讨论】：

谢谢，对过滤功能的深入了解。我需要针对所有非 woocommerce 类元素，所以这有点颠倒，但仍然是一个不错的解决方案。可能会尝试翻转它并稍后使用它，但现在我使用了其他一个。再次感谢。

【解决方案2】：

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

【讨论】：

感谢您的意见。

【解决方案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>

【讨论】：

谢谢，第一次尝试就完美了。刚刚将点击处理程序更改为 ajaxComplete 上的文档 :)。

【解决方案4】：

您已经很接近了，您的选择器有效并选择没有span 的festi-cart-product-price：

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

您只需使用closest() 向父母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>

【讨论】：

感谢您的解释和故障排除。最终使用了另一个答案，但感谢您的输入！

【解决方案5】：

这个怎么样。

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

未测试。

来自这个问题：How to select elements which do not have a specific child element with JQuery 值得一读这类“没有特征的后代”问题。

【讨论】：

永远无法真正使 :not 功能正常工作，所以我最终得到了其他答案之一。无论如何感谢您的输入！