質問: 'none'; } else { btnMore.addEventListener("click", function(e) { //ボタン押したら2個ずつ表示 }); } ```
回答: li.itemの動的な生成は考慮せず、li.itemを表示するかどうかだけ考えればいいのでしょうか。 動作確認までできてませんが、こんな方針ではいかがでしょうか。 ``` リスト1 リスト2 リスト3 リスト4 リスト5 リスト6 リスト7 もっと見る ``` ``` .hidden { display: none; } ``` ``` document.querySelector('.btn').addEventListener('click', e => { // .hidden が指定されている .item をさがす const hiddenItems = document.querySelectorAll('.item.hidden'); // .hidden.item が1つ以上ある場合、1つ目を表示する if(hiddenItems.length > 0) { hiddenItems[0].classList.remove('hidden'); } // .hidden.item が2つ以上ある場合、2つ目を表示する if(hiddenItems.length > 1) { hiddenItems[1].classList.remove('hidden'); } // .hidden.item が3つ以上ある場合 (= 2つを表示してもまだ非表示のものがある場合) // ボタン非表示を実行せず中断する if(hiddenItems.length > 2) return; // ボタンを非表示にする e.currentTarget.classList.add('hidden'); }); ```