回答率: 85.37%

質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう

ただいま回答率: 85.37%

トップ JavaScriptに関する質問

Q&A

解決済

5回答

20821閲覧

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

総合スコア117

3グッド

6クリップ

投稿2015/12/08 02:37

3

6

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

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

lang
1<div class="hoge_parent">
2  <h4>…</h4> or <h3>…</h3>
3  <div class="hoge_child">
4    <ul>
5      <li>…</li>
6      <li>…</li>
7      <li>…</li>
8      <li>…</li>
9    </ul>
10  </div>
11</div>

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

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

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

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

回答5件

0

ベストアンサー

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

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

投稿2015/12/08 05:27

総合スコア790

2015/12/08 06:09

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

2015/12/12 08:26

ご回答ありがとうございました。ご教授頂いた内容で実現できました！感謝いたします。

2015/12/14 05:24

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

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

0

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

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

JavaScript
1window.onload = function(){
2	var parentEle = document.getElementsByClassName("hoge_parent"); // class hoge_parentを検索
3	for(var i = 0; i < parentEle.length; i++){
4		// class hoge_parentが付いている要素毎に繰り返し
5		var ulEle = parentEle[i].getElementsByTagName("ul");// hoge_parent内のul要素を検索
6		var flag = false;
7		for(var j = 0; j < ulEle.length; j++){
8			if(ulEle[j].hasChildNodes()){
9				// ulに子要素があるなら
10				var ulChilds = ulEle[j].childNodes // ulの子要素を取得
11				for(var k = 0; k < ulChilds.length; k++){
12					// ulの子要素毎に繰り返し
13					if(ulChilds[k].tagName == "LI"){
14						// ulの子要素にliを含むなら
15						flag = true;
16						break;
17					}
18				}
19				if(flag){
20					break;
21				}
22			}
23		}
24		if(!flag){
25			// li要素を含まないため非表示
26			parentEle[i].style.display = "none"; //非表示
27			//parentEle[i].parentNode.removeChild(parentEle[i]);//削除
28		}
29	}
30}
31
32// IEでgetElementsByClassNameが使用できないので自分で定義
33function getElementsByClassName(targetClass, tagName){
34    if(tagName==null){
35    	tagName = "*";
36    }
37    var foundElements = new Array();
38    if (document.all){
39        var allElements = document.all;
40    }
41    else {
42       var allElements = document.getElementsByTagName(tagName);
43    }
44    var j = 0;
45    for (i=0;i<allElements.length;i++) {
46        if (allElements[i].className == targetClass) {
47            foundElements[j] = allElements[i];
48            j++;
49        }
50    }  
51    return foundElements;
52}

投稿2015/12/08 04:38

総合スコア1507

2015/12/12 08:27

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

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

0

javascript
1<script type="text/javascript" src="jquery-1.10.2.js"></script>
2<script type="text/javascript">
3$(function(){
4
5
6	$ele = $(".hoge_child");
7	$ele.each(function(index, child) {
8		$child = $(child);
9
10   		if ( $child.find("ul > li").length == 0 ) {
11   			$child.parent(".hoge_parent").hide();
12   		}
13   		
14	});
15
16 });
17</script>
18<div class="hoge_parent">
19  <h4>…</h4> or <h3>…</h3>
20  <div class="hoge_child">
21    <ul>
22
23    </ul>
24  </div>
25</div>
26
27
28<div class="hoge_parent">
29  <h4>…</h4> or <h3>…</h3>
30  <div class="hoge_child">
31    <ul>
32     	<li>…</li>
33      <li>…</li>
34      <li>…</li>
35      <li>…</li>
36    </ul>
37  </div>
38</div>
39
40
41<div class="hoge_parent">
42  <h4>…</h4> or <h3>…</h3>
43  <div class="hoge_child">
44    <ul>
45     	<li>…</li>
46      <li>…</li>
47      <li>…</li>
48      <li>…</li>
49    </ul>
50  </div>
51</div>

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

投稿2015/12/08 02:56

編集2015/12/08 03:14

総合スコア801

2015/12/08 03:14 編集

削除。

2015/12/12 08:27

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

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

0

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

javascript
1$(function(){
2    $(".hoge_parent").each(function(idx, ele){
3        var eleTarget= $(this).find(".hoge_children > ul > li");
4        if(eleTarget.length <= 0){
5            $(this).hide();
6        }
7    });
8});

投稿2015/12/08 03:00

総合スコア1698

2015/12/12 08:27

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

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

0

html
1<div class="hoge_parent">
2  <h4>hoge parent</h4>
3  <div class="hoge_child">
4    <ul>
5      <li>item</li>
6    </ul>
7  </div>
8</div>
9
10<div class="hoge_parent">
11  <h4>hoge parent: li is 0</h4>
12  <div class="hoge_child">
13    <ul>
14    </ul>
15  </div>
16</div>
17
18<div class="hoge_parent">
19  <h4>hoge parent</h4>
20  <div class="hoge_child">
21    <ul>
22      <li>item</li>
23      <li>item</li>
24    </ul>
25  </div>
26</div>

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

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

投稿2015/12/08 02:58

編集2015/12/08 03:12

総合スコア290

2015/12/12 08:27

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

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップ JavaScriptに関する質問

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

関連した質問

同じタグがついた質問を見る