Проблема с переключением класса CSS на динамически генерируемые элементы с помощью делегирования события

Question

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

Вот что у меня сейчас есть:

var listElement = document.querySelector("ul");

listElement.addEventListener("click", function(e) {
    if (e.target && e.target.nodeName == 'LI') {
        // How would I access the clicked li and apply
        // the .classList.toggle("class")?
    }
});

Answer 1

Используйте Element.closest() на Event.target, чтобы найти элемент списка, по которому щелкнули (target). Если вы нашли элемент списка, удалите класс active из всех дочерних элементов ul и установите активным target.

var listElement = document.querySelector("ul");

listElement.addEventListener("click", function(e){
  var target = e.target.closest('li');
  
  if(target) {
    e.currentTarget.querySelectorAll('li')
      .forEach(li => li.classList.remove('active'));
      
    target.classList.add('active')
  };
});

.active {
  color: red;
}

<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
  <li><span>item 4</span></li>
  <li><span>item 5</span></li>
</ul>