刪除不具有特定descendandt元素在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 - 價格 - 最裏面的跨度數量「類。另一個在「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(); 
    }); 

}); 

我一直在嘗試使用：不是選擇器，但它似乎並沒有產生任何東西。我真的不確定它出錯的地方。

你們中的任何一個都可以發現我的代碼出錯的地方，或者它對於一個簡單的解決方案來說是完全沒有希望的方法嗎？

Answer 1

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

Answer 2

這個怎麼樣。

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

未測試。

來自這個問題：How to select elements which do not have a specific child element with JQuery這是值得一讀這種'後裔沒有功能'的問題。

Answer 3

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

Answer 4

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

你是如此接近，你的選擇是有效的並選擇festi-cart-product-price有沒有span的：

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

你剛剛去了給父母tr使用closest()然後隱藏它們：

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

檢查This fiddle使用setTimeout()查看效果。

希望這會有所幫助。

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