How to change class in a list of items just to element that i clicked

Question

I want to add to take a class of an element to click, to the first click to put my class and to the second to take out my class. I only managed to add the class to the first click and I can't get it back to normal on the second click on the item. I also tried toggle but something is missing and I don't know what. Thanks :D

const items = document.querySelectorAll(".item");

items.forEach(item => {
  item.addEventListener('click', function() {
    items.forEach(el => el.classList.remove('active'));
    this.classList.add('active');
  })
});

.list {
  margin: 100px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 700px;
}

.item {
  width: 100px;
  aspect-ratio: 1;
  background-color: blueviolet;
}

.active {
  background-color: brown;
}

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 1

You don't have to loop through all elements every time. You can just look up the currently active element. This should work:

const items = document.querySelectorAll(".item");

items.forEach(item => {
  item.addEventListener('click', function(){
    // Check if clicked element is active
    if (this.classList.contains("active")){
      // Element was active, deactivate and terminate
      this.classList.remove("active");
      return;
    }
    // Element clicked was not active
    // Find active element in list and deactivate, if any
    var activeElement = document.querySelector(".list .active");
    if (activeElement != null) activeElement.classList.remove("active");
    this.classList.add("active");
  })
});

See live demo.