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

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

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

受付中

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

na818
na818

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0評価

1クリップ

132閲覧

投稿2022/06/23 02:36

編集2022/06/24 15:13

前提・実現したいこと

実現したいこと:子要素がすべてdisplay noneだったら、親要素を消す
前提
1.view_timer.jsというJavaScriptを使用してコンテンツのタイマー設定をしています。
設定した開始日時と終了日時を見て、display:noneとdisplay:inlineを自動的にstyle付与しています。
2.親要素はflexで横並びにして、横幅指定してします。打ち消し線
その中に子要素を入れて、複数のコンテンツをタイマー設定で切替表示しています。
3.結論
もし、子要素がすべて、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(); } }); });

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

yambejp

2022/06/23 02:45 編集

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

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」については、まだ知見がないため、調べてみます。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。