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

Question

以下のように親カテゴリに何もページがない（子要素がない場合）に、親要素の<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();
        }
    });
});

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

Comments

[yambejp]

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

Answer 1

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

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

---

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

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

$(this)と.closest()がポイントです。

Comments

[noraneko_ken]

こちらで解決いたしました。ありがとうございました。

Answer 2

.parents()メソッドを使ってみては？
.parents() | jQuery API Documentation