【jQuery】子要素が空の時の判定

Pocket
[`evernote` not found]

あまり使用用途がないかもしれませんが、ちょっとはまってしまったのでメモとして。

:not(:has(子要素))
で、子要素がない時というセレクターになります。
で、これを使って、子要素にアイテムがない場合、そのブロックを消してしまう。なんてことができないかと思案しておりまして・・・

html

<div class="block">
     <h1>タイトル</h1>
     <ul>
          <li>リスト</li>
          <li>リスト</li>
          <li>リスト</li>
     </ul>
</div>

こんなソースがあった場合に、リストの有無を判別して、空っぽだったら親要素ごと消してしまいたいのです。

実験その1

if文の判定に、セレクターをいれてしまう。
どうもうまくいきません。li要素があろうとなかろうと消えてしまいますので、おそらくif文の判定がうまく通っていないんでしょう。
DEMO

$('div.block').each(function(){
  if( $(this).children('ul:not(:has(li))') ){
    $(this).remove()
  }
})

実験その2

うまく通るようになりました。

DEMO

$('ul.hoge:not(:has(li))').addClass('removeThis');
$('div.block').each(function(){
      if( $(this).children('ul').hasClass('removeThis') ){
         $(this).remove();
     }
})

まず、先述の判定で、子要素のliが無い時、ulにremoveThisというクラスを付与します。
次に、親ブロックを検索して、removeThisというクラスが付いたulがあった場合は、そのブロックを削除すると。
ちょっと回りくどいですが、親ブロックが複数ある場合を想定するとこのような書き方になります。

も少しスマートにできるといいんですけどね。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。