特定の子要素が存在しない場合、親要素を非表示にしたい

Question

特定の子要素が存在しない場合、親要素を非表示にしたいです。

具体的構成は以下の通りです。

<div class="hoge_parent">
  <h4>…</h4> or <h3>…</h3>
  <div class="hoge_child">
    <ul>
      <li>…</li>
      <li>…</li>
      <li>…</li>
      <li>…</li>
    </ul>
  </div>
</div>

「.hoge_parent」は複数存在します。

それぞれの「.hoge_child > ul > li」がひとつも存在しない場合、その「.hoge_parent」を非表示にしたいです。

ご教授の程よろしくお願いいたします。

Answer 1

セレクタだけでやってみました。

$(".hoge_parent:not(:has(.hoge_child > ul > li))").hide();

Comments

[ikki57]

これでいけますね。
（先程ループ処理で行ったのですが、セレクタだけで可能ですね）

[castail]

ご回答ありがとうございました。

ご教授頂いた内容で実現できました！
感謝いたします。

[ikuwow]

素晴らしい回答に思わず唸ってしまいました。

Answer 2

なんとなくJQueryを使わずに書いてみました。

ネストが深くて嫌になりますね。

window.onload = function(){
	var parentEle = document.getElementsByClassName("hoge_parent"); // class hoge_parentを検索
	for(var i = 0; i < parentEle.length; i++){
		// class hoge_parentが付いている要素毎に繰り返し
		var ulEle = parentEle[i].getElementsByTagName("ul");// hoge_parent内のul要素を検索
		var flag = false;
		for(var j = 0; j < ulEle.length; j++){
			if(ulEle[j].hasChildNodes()){
				// ulに子要素があるなら
				var ulChilds = ulEle[j].childNodes // ulの子要素を取得
				for(var k = 0; k < ulChilds.length; k++){
					// ulの子要素毎に繰り返し
					if(ulChilds[k].tagName == "LI"){
						// ulの子要素にliを含むなら
						flag = true;
						break;
					}
				}
				if(flag){
					break;
				}
			}
		}
		if(!flag){
			// li要素を含まないため非表示
			parentEle[i].style.display = "none"; //非表示
			//parentEle[i].parentNode.removeChild(parentEle[i]);//削除
		}
	}
}

// IEでgetElementsByClassNameが使用できないので自分で定義
function getElementsByClassName(targetClass, tagName){
    if(tagName==null){
    	tagName = "*";
    }
    var foundElements = new Array();
    if (document.all){
        var allElements = document.all;
    }
    else {
       var allElements = document.getElementsByTagName(tagName);
    }
    var j = 0;
    for (i=0;i<allElements.length;i++) {
        if (allElements[i].className == targetClass) {
            foundElements[j] = allElements[i];
            j++;
        }
    }  
    return foundElements;
}

Comments

[castail]

ご回答ありがとうございます。

せっかくですが「tozjp」様をベストアンサーとさせて頂きます。
何卒ご容赦下さいませ。

Answer 3

<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){


	$ele = $(".hoge_child");
	$ele.each(function(index, child) {
		$child = $(child);

   		if ( $child.find("ul > li").length == 0 ) {
   			$child.parent(".hoge_parent").hide();
   		}
   		
	});

 });
</script>
<div class="hoge_parent">
  <h4>…</h4> or <h3>…</h3>
  <div class="hoge_child">
    <ul>

    </ul>
  </div>
</div>


<div class="hoge_parent">
  <h4>…</h4> or <h3>…</h3>
  <div class="hoge_child">
    <ul>
     	<li>…</li>
      <li>…</li>
      <li>…</li>
      <li>…</li>
    </ul>
  </div>
</div>


<div class="hoge_parent">
  <h4>…</h4> or <h3>…</h3>
  <div class="hoge_child">
    <ul>
     	<li>…</li>
      <li>…</li>
      <li>…</li>
      <li>…</li>
    </ul>
  </div>
</div>

こちらで試してください。

Comments

[liguofeng29]

削除。

[castail]

ご回答ありがとうございます。

せっかくですが「tozjp」様をベストアンサーとさせて頂きます。
何卒ご容赦下さいませ。

Answer 4

次のようにしてみてはいかがでしょうか?

$(function(){
    $(".hoge_parent").each(function(idx, ele){
        var eleTarget= $(this).find(".hoge_children > ul > li");
        if(eleTarget.length <= 0){
            $(this).hide();
        }
    });
});

Comments

[castail]

ご回答ありがとうございます。

せっかくですが「tozjp」様をベストアンサーとさせて頂きます。
何卒ご容赦下さいませ。

Answer 5

<div class="hoge_parent">
  <h4>hoge parent</h4>
  <div class="hoge_child">
    <ul>
      <li>item</li>
    </ul>
  </div>
</div>

<div class="hoge_parent">
  <h4>hoge parent: li is 0</h4>
  <div class="hoge_child">
    <ul>
    </ul>
  </div>
</div>

<div class="hoge_parent">
  <h4>hoge parent</h4>
  <div class="hoge_child">
    <ul>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
</div>

上記サンプルコードに対し、下記コードでテスト済です。

$(function() {
	var listLength;
	// '.hoge_parent' のオブジェクトを取得し、ループ処理します
	$('.hoge_parent').each(function(index, elm) {
		// hoge_parent配下のli要素数を取得する
		listLength = $(this).find('.hoge_child > ul > li').length;
		// list length がなければ非表示にします
		if (!listLength) {
			// 非表示にするだけなら
			$(this).hide();
			// DOMごと削除するなら
			// $(this).remove();
		}
	})
});

Comments

[castail]

ご回答ありがとうございます。

せっかくですが「tozjp」様をベストアンサーとさせて頂きます。
何卒ご容赦下さいませ。