もっと見るボタンをjQueryなしで実装したい

Question

やりたいこと
・リストの初期表示は2個で、もっと見るボタンを押したら2個ずつ表示される
・リストの数は最大いくつになるかわからない
・リストが最大まで表示されたらもっと見るボタンを非表示にする

という実装をjQuery無しで実装したいのですが、
さっぱりわからず、、、

すみませんが、教えていただきたいです。

<ul class="list">
  <li class="item">リスト1</li>
  <li class="item">リスト2</li>
  <li class="item">リスト3</li>
  <li class="item">リスト4</li>
  <li class="item">リスト5</li>
  <li class="item">リスト6</li>
  <li class="item">リスト7</li>
</ul>
<div class="btn">もっと見る</div>

const listContents = document.getElementsByClassName('item').length;
const List = document.querySelector('.item');
const btnMore = document.querySelector('.btn');
if(listContents <= 2){
  btnMore.style.display = 'none';
} else {
  btnMore.addEventListener("click", function(e) {
    //ボタン押したら2個ずつ表示
  });
}

Comments

[m.ts10806]

いちおう確認ですが「jQueryはJavaScriptのライブラリでPureJavaScriptで書かれている」というのは承知の上ですよね？
またjQueryで楽に実装できるのでしたらそのほうが良いように思いますがどういった経緯からjQuery記法ではないもので実装されようとしていますか？

[miyabi_pudding]

適用しているCSSも質問に記載をお願いします。
それで、何をやりたいかがより明確に回答者に伝わると思います。

[ar_]

mts10806さん
ご回答有り難うございます。
普段jQueryのコピペばっかりだったので、いざjQueryが使えない場合がきたら困ると思いネイティブJSの勉強をはじめました。
ですがそもそもjQueryもコピペばっかでしっかり読めないので、まずはjQueryのソースコードを読むことからはじめて少しずつネイティブに変換していくようにします。

[ar_]

miyabi_takatsukさん
ご指摘ありがとうございます。
おっしゃる通りです。
今後、徹底させていただきます。

Answer 1

li.itemの動的な生成は考慮せず、li.itemを表示するかどうかだけ考えればいいのでしょうか。
動作確認までできてませんが、こんな方針ではいかがでしょうか。

<ul class="list">
  <li class="item">リスト1</li>
  <li class="item">リスト2</li>
  <li class="item hidden">リスト3</li>
  <li class="item hidden">リスト4</li>
  <li class="item hidden">リスト5</li>
  <li class="item hidden">リスト6</li>
  <li class="item hidden">リスト7</li>
</ul>
<div class="btn">もっと見る</div>

.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');
});

Comments

[ar_]

ありがとうございます！
増やすことばかり考えていたので、classをとっていくという考えに至りませんでした。。
とても参考になりました！