子要素がすべてdisplay noneだったら（＝display:inlineがなければ）、親要素を消すには

前提・実現したいこと

実現したいこと：子要素がすべてdisplay noneだったら、親要素を消す
前提：
１．view_timer.jsというJavaScriptを使用してコンテンツのタイマー設定をしています。
設定した開始日時と終了日時を見て、display:noneとdisplay:inlineを自動的にstyle付与しています。
２．親要素はflexで横並びにして、横幅指定してします。~~打ち消し線~~
その中に子要素を入れて、複数のコンテンツをタイマー設定で切替表示しています。
３．結論
もし、子要素がすべて、display:noneになったら（＝display:inlineがなければ）、親要素のみ横幅指定しているため、余白が残ってしまうため、JavaScriptで制御して、親要素を削除するようにする。

※プログラミング初心者で申し訳ございませんが、どうぞよろしくお願いいたします。

発生している問題・エラーメッセージ

「https://teratail.com/questions/40956」を参考にして、実装してみたのですが、
子要素がすべて、display:noneになったら（＝display:inlineがなければ）、
不明なidが親要素に付与されていて、まだ、親要素が残っています。

表示要素がない場合の状態（キャプチャ）

※一番左側が子要素が非表示で、親要素のみが残ってしまっている状態です。

上記キャプチャの一番左側に、以下のスタイルが残ってしまいます。

.keyword_list li{
  width: 15%;
  margin-right: 1.66666%;
  background: #fdeff2;
  padding: 0.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

https://teratail.com/questions/40956　（以下、参照したコード）

$(".about_sale_main").each(function(index) {
    if($("section:not([class*='hidden-'])", this).length == 0){
        // hidden-を含まないsectionが0個、つまり全てhidden-を含んでいるので見えていない
        $(this).addClass("hidden-not-display");
    }
    else {
        $(this).removeClass("hidden-not-display");
    }
});

該当のソースコード

うまくいっていないHTMLの箇所（不明なIDが付いてしまった「id="sizzle1655950385117"」）

<li class="keyword_item" id="sizzle1655950385117">
<span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/22 10:00" style="display: none;">
<a href="#">#ハッシュタグ</a>
</span>
</li>

実際に自分で改変してみたJavaScript

//https://teratail.com/questions/40956
$(".keyword_item").each(function(index) {
    if($("span([style*='inline'])", this).length == 0){
        // spanタグにdisplay:inlineが1つもなければ
        $(this).addClass("hidden-display");
    }
    else {
        $(this).removeClass("hidden-display");
    }
});

実際のHTML

<!-- .keyword_list -->
		<ul class="keyword_list mt10 mb20">
			<!-- タイマー設定　1 -->
			<li class="keyword_item">　**親要素**
　　　　　　　　　　　**子要素**
				<span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/22 10:00">
					<a href="#">#ハッシュタグ</a>
				</span>

			</li>

			<!-- タイマー設定　2 -->
			<li class="keyword_item">　**親要素**
　　　　　　　　　　　**子要素**
				<span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00">
					<a href="#">#ハッシュタグ</a>
				</span>
　　　　　　　　　　　**子要素**
				<span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00">
					<a href="#">#ハッシュタグ2</a>
				</span>
			</li>

			<!-- タイマー設定　3 -->
			<li class="keyword_item">　**親要素**
　　　　　　　　　　　**子要素**
				<span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00">
					<a href="#">#ハッシュ</a>
				</span>
　　　　　　　　　　　**子要素**
				<span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00">
					<a href="#">#ハッシュ2</a>
				</span>
			</li>

			<!-- タイマー設定　4 -->
			<li class="keyword_item">　**親要素**
　　　　　　　　　　　**子要素**
				<span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00">
					<a href="#">#ハッシュタグ#ハッシュタグ#ハッシュ</a>
				</span>
　　　　　　　　　　　**子要素**
				<span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00">
					<a href="#">#ハッシュタグ#ハッシュタグ#ハッシュ2</a>
				</span>
			</li>

			<!-- タイマー設定　5 -->
			<li class="keyword_item">　**親要素**
　　　　　　　　　　　**子要素**
				<span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00">
					<a href="#">#ハッシュタグ</a>
				</span>
　　　　　　　　　　　**子要素**
				<span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00">
					<a href="#">#ハッシュタグ2</a>
				</span>
			</li>

			<!-- タイマー設定　6 -->
			<li class="keyword_item">　**親要素**
　　　　　　　　　　　**子要素**
				<span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00">
					<a href="#"><a href="#">#ハッシュタグ#ハッシュ</a></a>
				</span>
　　　　　　　　　　　**子要素**
				<span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00">
					<a href="#">#ハッシュタグ#ハッシュ2</a>
				</span>
			</li>
		</ul>
		<!-- /.keyword_list -->

スタイルシート

/* ---------------------------------------------------------------------------------------------
   KEYWORD
--------------------------------------------------------------------------------------------- */
.keyword_list{
  width:100%;
  display: flex;
  list-style: none;
  padding: 0;
}

.keyword_list li{
  width: 15%;
  margin-right: 1.66666%;
  background: #fdeff2;
  padding: 0.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.keyword_list li a{
  font-weight: 700;
}

.hidden-display{
  display: none;
}

@media screen and (max-width: 767px) {
  .keyword_list{
    flex-wrap: wrap;
  }

  .keyword_list li{
    width: 30%;
    margin-right: 3.33333%;
    margin-bottom: 15px;
  }

  .keyword_list li a{
    font-size: 13px;
  }
}

view_timer.js

$(document).ready(function() {
  $(".view_timer").each(function(index, target) {
    var startDate = $(this).attr("data-start-date");
    var endDate = $(this).attr("data-end-date");
    var nowDate = new Date();

    if (startDate) {
      startDate = new Date(startDate);
    } else {
      startDate = nowDate;
    }
    if (endDate) {
      endDate = new Date(endDate);
    }

    if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

何卒、よろしくお願いいたします。

yambejp

2022/06/23 02:45 編集

> display noneだったらだと、条件が足りないような気がします。表示要素がないなら普通に親要素は見えなくなりませんか？具体的にどういう状態が問題なのか例示できますか？

退会済みユーザー

2022/06/23 03:01

display: none; だけを定義したCSSクラスを使う前提があれば、クラス適用済みか否かでquerySelectorAllしても良さそうだけど

na818

2022/06/23 03:57

【yambejp様】ご確認ありがとうございます。子要素の表示要素がない場合の親要素の状態＝キャプチャを質問上部へ追加いたしました。 ※一番左側が子要素が非表示で、親要素のみが残ってしまっている状態となります。キャプチャの一番左側に、以下のスタイルが残ってしまいます。 ----------- .keyword_list li{ width: 15%; margin-right: 1.66666%; background: #fdeff2; padding: 0.5%; display: flex; align-items: center; justify-content: center; text-align: center; } ----------- 【sPy2bUDOZ4uRa7t様】ご確認ありがとうございます。「querySelectorAll」については、まだ知見がないため、調べてみます。

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

回答1件

view_timer.js の方を見てみると、show() と hide() で表示/非表示の切り替えをしています。
これの表示されている要素の数が0なら親要素を非表示にすればいいわけです。

jQueryには :visible という便利な疑似クラスがあります。これをつかって表示されている要素を取得できます。
親要素の表示/非表示も show() hide() を使えば簡単でしょう。

js
1$(".keyword_item").each(function(index) {
2    if($("span:visible", this).length == 0){
3        // :visibleなspanがなければ
4        $(this).hide();
5    }
6    else {
7        $(this).show();
8    }
9});

投稿2022/06/23 05:03

hatena19

総合スコア34345

na818

2022/06/24 02:15 編集

【hatena19】様ご確認ありがとうございます。ご教授いただいたScriptを実装してみましたところ、子要素に、display:noneとdisplay:inlineが混在している場合も、親要素「.keyword_item」が非表示になってしまいました。 display:noneとdisplay:inlineが混在している時には、display:inlineの要素は表示したいため、なぜこのような出力結果になるのか、調べてみます。以下に、実装したHTMLを記述いたしました。こちらをHTMLで保存していただくと、ローカル上でも挙動が確認できるような作りになっております。 ===================================== 実装後のHTML ===================================== <!doctype html> <html lang="ja"> <head> <meta charset="shift_jis"> <meta content="width=device-width" name="viewport"> <meta content="telephone=no" name="format-detection"> <title>Demo</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:400,500,700&subset=japanese"> <style> .view_timer{display:none;} .site-wrapper { width: 980px; padding: 80px 15px 0 15px; margin: 0 auto; } @media screen and (max-width: 767px) { .site-wrapper { width: 100%; padding: 56px 0 0 0; } } @media screen and (max-width: 559px) { .site-wrapper { width: 100%; padding: 70px 0 0 0; } } .site-wrapper .site-main { width: 100%; padding-top: 1px } @media screen and (max-width: 767px) { .site-wrapper .site-main { width: 90.66666667%; margin-left: auto; margin-right: auto } } .site-wrapper .site-main .sec-wrap { width: 100%; margin: 20px 0 0 0; } /* ------------------------------------- KEYWORD ------------------------------------- */ .keyword_list{ width:100%; display: flex; list-style: none; padding: 0; } .keyword_list li{ width: 15%; margin-right: 1.66666%; background: #fdeff2; padding: 0.5%; display: flex; align-items: center; justify-content: center; text-align: center; } .keyword_list li a{ font-weight: 700; } .hidden-not-display{ display: none; } @media screen and (max-width: 767px) { .keyword_list{ flex-wrap: wrap; } .keyword_list li{ width: 30%; margin-right: 3.33333%; margin-bottom: 15px; } .keyword_list li a{ font-size: 13px; } } </style> </head> <body> <div class="site-wrapper"> <div class="site-main"> <ul class="keyword_list mt10 mb20"> <li class="keyword_item"> <span data-end-date="2022/6/22 10:00" data-start-date="2022/6/20 10:00" class="view_timer"> <a href="#">#ハッシュタグ</a> </span> </li> <li class="keyword_item"> <span data-end-date="2022/6/30 10:00" data-start-date="2022/6/20 10:00" class="view_timer"> <a href="#">#ハッシュタグ</a> </span> <span data-end-date="2022/7/15 10:00" data-start-date="2022/6/30 10:00" class="view_timer"> <a href="#">#ハッシュタグ2</a> </span> </li> <li class="keyword_item"> <span data-end-date="2022/6/30 10:00" data-start-date="2022/6/20 10:00" class="view_timer"> <a href="#">#ハッシュ</a> </span> <span data-end-date="2022/7/15 10:00" data-start-date="2022/6/30 10:00" class="view_timer"> <a href="#">#ハッシュ2</a> </span> </li> <li class="keyword_item"> <span data-end-date="2022/6/30 10:00" data-start-date="2022/6/20 10:00" class="view_timer"> <a href="#">#ハッシュタグ#ハッシュタグ#ハッシュ</a> </span> <span data-end-date="2022/7/15 10:00" data-start-date="2022/6/30 10:00" class="view_timer"> <a href="#">#ハッシュタグ#ハッシュタグ#ハッシュ2</a> </span> </li> <li class="keyword_item"> <span data-end-date="2022/6/30 10:00" data-start-date="2022/6/20 10:00" class="view_timer"> <a href="#">#ハッシュタグ</a> </span> <span data-end-date="2022/7/15 10:00" data-start-date="2022/6/30 10:00" class="view_timer"> <a href="#">#ハッシュタグ2</a> </span> </li> <li class="keyword_item"> <span data-end-date="2022/6/30 10:00" data-start-date="2022/6/20 10:00" class="view_timer"> <a href="#"><a href="#">#ハッシュタグ#ハッシュ</a></a> </span> <span data-end-date="2022/7/15 10:00" data-start-date="2022/6/30 10:00" class="view_timer"> <a href="#">#ハッシュタグ#ハッシュ2</a> </span> </li> </ul> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> //view_timer $(document).ready(function() { $(".view_timer").each(function(index, target) { var startDate = $(this).attr("data-start-date"); var endDate = $(this).attr("data-end-date"); var nowDate = new Date(); if (startDate) { startDate = new Date(startDate); } else { startDate = nowDate; } if (endDate) { endDate = new Date(endDate); } if (startDate <= nowDate && (!endDate || nowDate <= endDate)) { $(this).show(); } else { $(this).hide(); } }); }); $(".keyword_item").each(function(index) { if($("span:visible", this).length == 0){ // :visibleなspanがなければ $(this).hide(); } else { $(this).show(); } }); </script> </body> </html>

hatena19

2022/06/24 06:13 編集

$(document).ready( の中に入れとかないと、view_timerが実行される前に実行されてしまいます。 CSSに .view_timer {display:none;} があるので、初期状態は、 span.view_timer がすべて非表示なので、親要素もすべて表示になります。 <script> //view_timer $(document).ready(function () { $(".view_timer").each(function (index, target) { var startDate = $(this).attr("data-start-date"); var endDate = $(this).attr("data-end-date"); var nowDate = new Date(); if (startDate) { startDate = new Date(startDate); } else { startDate = nowDate; } if (endDate) { endDate = new Date(endDate); } if (startDate <= nowDate && (!endDate || nowDate <= endDate)) { $(this).show(); } else { $(this).hide(); } }); $(".keyword_item").each(function (index) { if ($("span:visible", this).length == 0) { // :visibleなspanがなければ $(this).hide(); } else { $(this).show(); } }); }); </script>

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