子要素がない場合に親要素ごと削除・非表示にさせる

以下のように親カテゴリに何もページがない（子要素がない場合）に、親要素の<dl>と一緒に非表示にしたい

<div class="class">
<dl>
<dt>
<a href="">カテゴリ</a>
</dt>
<dd>
<ul><li><a href="">ページ</a></li></ul></dd>
</dl>


<dl>
<dt>
<a href="">カテゴリ</a>
</dt>
<dd>
<ul>  </ul></dd>
</dl>
</div>

以下のような方法を試してみたのですが、子要素があるカテゴリも一緒に削除がされてしまいます。

$(function(){
    $(".class dd").each(function(idx, ele){
        var eleTarget=  $(".class dd").find("li");
        if(eleTarget.length <= 0){
            $(".c_list dd dt").hide();
        }
    });
});

子要素がない場合、親要素を非表示にすることはできましょうでしょうか。

yambejp

2020/04/07 08:44

挙動がいまいちわかりませんがdtとddは親子関係にないです一個もdt,ddを持たないdlを削除するのでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

<ul> </ul>の部分を
<ul></ul>にできるのであれば、以下の記述が使えます。

jQuery
1$(function() {
2    // <ul>の中身が、半角スペースも含め空の場合「:empty」で指定できる
3    $('.class dd ul:empty').closest('dl').hide();
4});

追記: 質問の趣旨からいうと、以下が妥当そうですね..

jQuery
1$(function() {
2    $(".class dd").each(function(idx, ele) {
3        var eleTarget = $(this).find("li");
4        if (eleTarget.length <= 0) {
5            $(this).closest('dl').hide();
6        }
7    });
8});