実現したいこと
.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 コメント