要素をクリックしたらクラスを付与し、その前にクリックして与えた別の要素のクラスを取る方法

addやremoveやtoggleでクラスを付与したり、除いたりするのは簡単にできますが、 リストのように複数ある中で、一つをクリックしたら、クラスが付与され、ほかのリストをクリックしたら、先ほどのクラスを除き、新しくクラスを付与するというのはよくわからなかったので、いろいろ調べてやってみました。

 <div class="header">
    <ul>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
        <li>リスト4</li>
        <li>リスト5</li>
    </ul>
  </div> 

  .header{
    height: 70px;
    background: rgb(3, 3, 77);
    margin-bottom: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header ul{
      display: flex;
      justify-content: space-around;
      margin: 10px 5px;
      height: 40px;
      width: 100%;
  }
  .header ul li{
      display: inline-block;
      background: rgb(3, 3, 77);
      padding: 0 5px;
      color: white;
      line-height: 40px;
      border-radius: 5px;
  }
  .header ul li.active{              /*クラス"active"を与えた時、背景色が変わる*/
      background: rgb(160, 160, 226);
  }

javascriptの6~9行目で、最初にすべての<li>からクラスを取り除くよう設定します。これにより、その前にクリックして付与したクラスを取り除き、クリックしたリストにクラスが付与されます。

  <script>    
    document.addEventListener('DOMContentLoaded', function() {
        const elements = document.querySelectorAll("li");
        const elementlength = elements.length;
        for (let i = 0; 1 < elementlength; i++ ){
            elements[i].addEventListener("click", function(){
            elements.forEach(function(element) {
            element.classList.remove("active") 
            });
            elements[i].classList.add("active")
            });
        };
    });
  </script>

完成