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

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

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

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

4回答

669閲覧

子要素がすべてdisplay:none;のとき、親要素を非表示にしたいです

oijoijsd

総合スコア0

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2024/03/18 08:52

編集2024/03/18 11:18

実現したいこと

.dailyがすべてdisplay:none;になっているとき親要素の.month1を非表示にしたいです。
また、.month1は複数あり、すべての.dailyがdisplay:none;になっている場合、それの親要素のみを非表示にしたいです。
inputで検索機能を付けており、当てはまらない.dailyにdisplay:none;が付くようになっています。

発生している問題・分からないこと

すべての子要素がdisplay:none;のときだけ、親要素を非表示にする方法がわかりません。

該当のソースコード

<input type="search" id="input" onkeyup="javaSearch()" placeholder="Search"> <details class="month1" open><summary class="month">10</summary> <div class="daily"> <h2>14</h2> <p>スタート</p> </div> <div class="daily"> <h2>11</h2> <p>おおおおa</p> </div> </details> <script> function javaSearch() { document.querySelectorAll('.daily').forEach(item => item.querySelectorAll('p')[0].innerText.toLowerCase().indexOf(document.querySelector('#input').value.toLowerCase()) > -1 ? item.style.display = 'block' : item.style.display = 'none'); } </script>

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

同様の質問が見つかりませんでした。

補足

特になし

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2024/03/18 09:20

> .dailyがすべてdisplay:none;になっているとき親要素の.monthを非表示 .dailyと.monthは親子関係ではなく兄弟関係では?
oijoijsd

2024/03/18 10:11

見直してみたところ、yamabejpさんのおっしゃる通りでしたので、修正いたします
yambejp

2024/03/18 10:42

.dailyのdisplayをnoneにするのはプログラムでするのですか? それともスタティックに<div class="daily" style="display:none">と指定するのでしょうか? またdisplay:noneはたとえば<div class="daily hide">となっていて .hideにdisplay:noneが指定されている場合でも反応させるのでしょうか?
oijoijsd

2024/03/18 10:47

すべての子要素が<div class="daily" style="display:none">となっているときに.month1を非表示にしたいです
guest

回答4

0

少し考え方を変えた案を提案します。

  1. 入力時にmonth1の持つdailyを全てテストして検索結果が含まれるか判定
  2. 検索結果が含まれなかったmonth1は非表示にする
  3. 検索結果が含まれていたmonth1内のdailyについて、テキストに応じた表示設定を行う

javascript

1const months = document.querySelectorAll('.month1'); 2 3// テキストを取得する部分を関数化 4const get_daily_text = daily => daily.querySelector('p').textContent.toLowerCase(); 5 6// inputイベントで処理を行う 7input.addEventListener('input', function onInput (event) { 8 const value = this.value; 9 let dailies, not_found; 10 months.forEach(month => { 11 // month1内のdailyを取得 12 dailies = month.querySelectorAll('.daily'); 13 14 // 全てのdailyにinputのテキストが含まれていないことを判定、表示設定 15 not_found = dailies.every(daily => !get_daily_text(daily).includes(value)); 16 month.style.display = not_found? 'none': 'block'; 17 18 // 見付からない場合にはmonth自体のdisplayをnoneにして抜ける 19 if (not_found) return; 20 21 // dailyのテキストに応じたdisplayの変更処理 22 dailies.map(daily => [daily, get_daily_text(daily)]) 23 .forEach(([daily, text]) => { 24 daily.style.display = text.includes(value)? 'block': 'none'; 25 }); 26 }); 27}, false);

投稿2024/03/18 23:36

編集2024/03/18 23:42
Refrain

総合スコア539

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

回答の前にonkeyupよりoninputの方が適切だと思います。
oninputだとマウスで入力した場合も反応します。

JavaScriptはそのままでCSSで解決する場合

CSS

1<style> 2.month1:not(:has(.daily:not([style*="none"]))) { 3 display: none; 4} 5</style>

「styleにnoneを含まない.daily」を持っていない.month1は非表示にする。


CSSを使わずJavaScriptで処理する場合
まず、<input>を下記の様に修正

HTML

1<input type="search" id="input" oninput="javaSearch(this.value.toLowerCase())" placeholder="Search">

引数で検索ワードを渡してます。

JavaScriptは2重ループで処理します。

JavaScript

1function javaSearch(word) { 2 document.querySelectorAll('.month1').forEach(month1 => { 3 let flag = false; 4 month1.querySelectorAll('.daily').forEach(daily => { 5 let isFound = daily.querySelector('p').innerText.toLowerCase().indexOf(word) > -1; 6 daily.style.display = isFound ? null : 'none'; 7 if (isFound) flag = true; 8 }); 9 month1.style.display = flag ? null : 'none'; 10 }); 11}

投稿2024/03/18 19:54

CTRL-S

総合スコア180

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

力技ですが、clientHeight === 0を条件にしてみてはいかがでしょうか?

投稿2024/03/18 12:03

Refrain

総合スコア539

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

とりあえずこんな感じで

javascript

1window.addEventListener('DOMContentLoaded', ()=>{ 2 document.querySelectorAll('.month1').forEach(x=>{ 3 x.style.display=[...x.querySelectorAll('.daily')].filter(x=>x.style.display!="none").length==0?'none':''; 4 }); 5});

場合分けが明確ではないのでサンプルデータをもう少し工夫してもらえると回答が付きやすいかも

追記

もうすこしドラスティックにすべての.dailyが非表示であれば親を消すならこう

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 document.querySelectorAll('.month1').forEach(x=>{ 4 x.style.display=[...x.querySelectorAll('.daily')].filter(x=>getComputedStyle(x).getPropertyValue('display')!="none").length==0?'none':''; 5 }); 6}); 7</script> 8<style> 9.hide{display:none;} 10</style> 11<details class="month1" open> 12 <summary class="month">1</summary> 13 <div class="daily"> 14 <h2>11</h2> 15 <p>aaaa</p> 16 </div> 17 <div class="daily"> 18 <h2>12</h2> 19 <p>bbbb</p> 20 </div> 21</details> 22<details class="month1" open> 23 <summary class="month">2</summary> 24 <div class="daily" style="display:none"> 25 <h2>21</h2> 26 <p>aaaa</p> 27 </div> 28 <div class="daily" style="display:none"> 29 <h2>22</h2> 30 <p>bbbb</p> 31 </div> 32</details> 33<details class="month1" open> 34 <summary class="month">3</summary> 35 <div class="daily" hidden> 36 <h2>31</h2> 37 <p>aaaa</p> 38 </div> 39 <div class="daily hide"> 40 <h2>32</h2> 41 <p>bbbb</p> 42 </div> 43</details>

投稿2024/03/18 10:59

編集2024/03/18 11:20
yambejp

総合スコア115284

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oijoijsd

2024/03/18 11:15

回答ありがとうございます。サンプルデータをもう少し編集します
yambejp

2024/03/18 11:20

追記しておきました。 条件を確認してみてください
oijoijsd

2024/03/18 11:56

追記ありがとうございます。試してみましたが、.month1を非表示にすることができませんでした。
yambejp

2024/03/18 12:04

>.month1を非表示にすることができませんでした。 https://codepen.io/yambejp/pen/MWRJWbj 1,2,3の内、全ての.dailyが非表示の2,3はdetailsごと非表示になっていませんか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問