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

実現したいこと

.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>

試したこと・調べたこと

上記の詳細・結果

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

補足

特になし

コメントを投稿

0 コメント