на клик выделите div

Question

Я пытаюсь выделить определенный элемент div, добавив класс «активный» при его нажатии, и удалить класс «активный» из всех остальных элементов div, по которым был выполнен щелчок, и имеющих активный класс.

Только один div может иметь активный класс одновременно

let i = 0;
    for (; i < list_wrapper.children.length; i++) {
        console.log(list_wrapper.children[i]);
        list_wrapper.children[i].addEventListener('click', function () {
            if (this.className.indexOf('active') === -1) {
                this.classList.add('active');
            }
            if (this.className.indexOf('active') > -1) {
                // this.classList.remove('active');
                console.log(list_wrapper.children)
            }

        })

    }

Answer 1

document.querySelectorAll('#wrapper li').forEach(function (el) {
  el.addEventListener('click', function (e) {
    document.querySelectorAll('#wrapper li').forEach(x => x.classList.remove('active'));
    e.currentTarget.classList.toggle('active');
  });
});

.active {
  color: red
}

<ul id="wrapper">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

Answer 2

Вы можете сделать this.classList.remove('active');, не проверяя, существует ли он на всех элементах, а затем добавить его к выбранному:

const divs = document.querySelectorAll('div');

divs.forEach(e => {
  e.addEventListener('click', (e) => {
  
    // remove the class from the others
    divs.forEach(d => d.classList.remove('active'));
    
    // add the class to the current one
    e.target.classList.add('active');
  });
})

div{
  padding: 10px;
  float: left;
  margin: 10px;
  cursor: pointer;
}

.active{
  background: red;
}

<div>
  hello
</div>
<div>
  lorem
</div>
<div>
  world
</div>