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

Question

実現したいこと

.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等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

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

補足

特になし

Comments

[yambejp]

＞ .dailyがすべてdisplay:none;になっているとき親要素の.monthを非表示

.dailyと.monthは親子関係ではなく兄弟関係では？

[oijoijsd]

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

[yambejp]

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

[oijoijsd]

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

Answer 1

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

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

const months = document.querySelectorAll('.month1');

// テキストを取得する部分を関数化
const get_daily_text = daily => daily.querySelector('p').textContent.toLowerCase();

// inputイベントで処理を行う
input.addEventListener('input', function onInput (event) {
  const value = this.value;
  let dailies, not_found;
  months.forEach(month => {
    // month1内のdailyを取得
    dailies = month.querySelectorAll('.daily');

    // 全てのdailyにinputのテキストが含まれていないことを判定、表示設定
    not_found = dailies.every(daily => !get_daily_text(daily).includes(value));
    month.style.display = not_found? 'none': 'block';

    // 見付からない場合にはmonth自体のdisplayをnoneにして抜ける
    if (not_found) return;

    // dailyのテキストに応じたdisplayの変更処理
    dailies.map(daily => [daily, get_daily_text(daily)])
        .forEach(([daily, text]) => {
      daily.style.display = text.includes(value)? 'block': 'none';
    });
  });
}, false);

Answer 2

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

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

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

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

---

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

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

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

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

function javaSearch(word) {
	document.querySelectorAll('.month1').forEach(month1 => {
		let flag = false;
		month1.querySelectorAll('.daily').forEach(daily => {
			let isFound = daily.querySelector('p').innerText.toLowerCase().indexOf(word) > -1;
			daily.style.display = isFound ? null : 'none';
			if (isFound) flag = true;
		});
		month1.style.display = flag ? null : 'none';
	});
}

Answer 3

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

Answer 4

とりあえずこんな感じで

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

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

追記

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

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.month1').forEach(x=>{
    x.style.display=[...x.querySelectorAll('.daily')].filter(x=>getComputedStyle(x).getPropertyValue('display')!="none").length==0?'none':'';
  });
});
</script>
<style>
.hide{display:none;}
</style>
<details class="month1" open>
  <summary class="month">1</summary>
  <div class="daily">
     <h2>11</h2>
     <p>aaaa</p>
  </div>
  <div class="daily">
     <h2>12</h2>
     <p>bbbb</p>
  </div>
</details>
<details class="month1" open>
  <summary class="month">2</summary>
  <div class="daily" style="display:none">
     <h2>21</h2>
     <p>aaaa</p>
  </div>
  <div class="daily" style="display:none">
     <h2>22</h2>
     <p>bbbb</p>
  </div>
</details>
<details class="month1" open>
  <summary class="month">3</summary>
  <div class="daily" hidden>
     <h2>31</h2>
     <p>aaaa</p>
  </div>
  <div class="daily hide">
     <h2>32</h2>
     <p>bbbb</p>
  </div>
</details>

Comments

[oijoijsd]

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

[yambejp]

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

[oijoijsd]

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

[yambejp]

>.month1を非表示にすることができませんでした。

https://codepen.io/yambejp/pen/MWRJWbj

1,2,3の内、全ての.dailyが非表示の2,3はdetailsごと非表示になっていませんか？