Как в js обновить список нод в querySelectorAll и их EventListener после удаления ноды?

Question

[junior_www]

Добрый день!
Есть простая корзина.
Элементы в ней удаляются через jquery

$('.show-cart').on("click", ".delete-item", function (event) {
    var name = $(this).data('name')
    shoppingCart.removeItemFromCartAll(name);
    displayCart();
  })

как периписать на чистый js?
делаю так

const deleteItemBtn = document.querySelectorAll('.delete-item');
  
  deleteItemBtn.forEach((item)=>{
      item.addEventListener('click', ()=>{
          const name = item.dataset.name
          shoppingCart.removeItemFromCartAll(name);
          displayCart();
  })
})

но этот код работает 1 раз,
Как после срабатываения addEventListener обновить данные новых элементов в querySelectorAll?

Answer 1

[Сергей Соколов]

слушайте событие клика как jQuery – не на каждой кнопке по отдельности, а один раз на общем родителе: на этом .show-cart

В обработчике проверяйте, по чему именн, там, где-то в дочерних, кликнули (см. event.target). Если у кликнутого есть класс .delete-item, то действуем далее.

Слушать на общем родителе – называется волшебным термином «делегирование событий».

Comments

[junior_www]

Сергей Соколов, благодарю