"ul"が含まれていないすべての "li"を選択

Question

製品のネストされたドロップダウンナビゲーションを構築していて、空のカテゴリを自動的に非表示にしたい。

残念ながら、サーバーサイドの言語では効率的な方法ができないため、各カテゴリが直接持っている製品の数を出力してから、空のノードを削除するためにjQueryを使用できます。

私はliターゲットにする "のnav#top_nav内秒：

ulネストの1つのレベルを考えると

<nav id="top_nav"> 
    <nav class="nav1"> 
    <ul> 
     <li data-num-products="0"> 
     <a href="...">AAA</a> 
     <ul> 
      <li data-num-products="3"><a href="...">BBB</a></li> 
      <li data-num-products="0"><a href="...">CCC</a></li> 
     </ul> 
     </li> 
     <li data-num-products="7"><a href="">DDD</a></li> 

    </ul> 
    <nav> 
</nav> 

年代を、私はどのli年代...

• を削除したいです

  はネストされておらず、その内にulがあり、

• はdata-num-products == 0。それはul子供を持っているので、そうAAA上記の例では

は保持されますが、それはul子供なしの製品を持っていないので、CCCが削除されます。

UPDATE：Liはその李要素をすべて削除され、ULが含まれている場合、我々はあまりにもULを削除したいと思うので、それは除去の2回のパスが必要な場合があります

。

Answer 1

$("#top_nav li[data-num-products='0']").filter(function() { 
    return $(this).children("ul").length === 0; 
}).remove(); 

Answer 2

このように：

$('#top_nav li[data-num-products="0"]:not(:has(ul))').remove(); 

セレクタの内訳は、ちょうど:not(:has(li))に:not(:has(ul))を変更、更新した質問について...

'#top_nav'    // start at element with "top_nav" id 
' '      // and select descendant... 
'li'      // li elements... 
'[data-num-products="0"]' // ...where attribute "data-num-products" is "0" 
':not('     // ...but exclude li elements that... 
    ':has(ul)'    //  ...have descendant ul elements 
')' 

---

です。

$('#top_nav li[data-num-products="0"]:not(:has(li))').remove(); 

http://jsfiddle.net/4YFDd/

Answer 3

$("#top_nav li").filter(function(){ 
    return !this.getElementsByTagName("ul").length && !+this.getAttribute("data-num-products"); 
}).remove(); 

http://jsfiddle.net/X2D7y/

これは何のULの子孫が存在しない場合は削除して、JavaScriptで0

Answer 4

の属性値を持つことになります。

var lis = document.querySelectorAll('#top_nav li[data-num-products="0"]'); 
for(var li = 0; li < lis.length; li++) { 
    !lis[li].getElementsByTagName('ul').length && lis[li].parentNode.removeChild(lis[li]); 
}; 

デモ：http://jsfiddle.net/ThinkingStiff/2zS9B/