<ul class="mylist">
    <li class="">リストアイテム1</li>
    <li class="">リストアイテム2</li>
    <li class="list-item">リストアイテム3</li>
    <li class="list-item">リストアイテム4</li>
   <li class="">リストアイテム5</li>
   <li class="list-item">リストアイテム6</li>
   <li class="list-item">リストアイテム7</li>
</ul>

<button id="myButton">ボタン</button>
li:nth-child(even of :not(.hidden)) {
  background: pink;
}

.list-item.hidden{
  display:none;
}
#myButton{
  width:150px;
  background: orange;
  height: 50px;
}
document.getElementById("myButton").addEventListener("click", function() {
    // 追加・削除対象の要素を取得
    const targetElement = document.querySelector(".list-item");

    // クリックのたびにクラスを追加・削除
    targetElement.classList.toggle("hidden");
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.