Как привязать обработчики событий к динамически созданным элементам в JavaScript?

Использование делегирования событий (Event Delegation)

Ваша проблема очень распространена среди начинающих разработчиков. Основная причина в том, что addEventListener привязывается только к тем элементам, которые существуют в DOM на момент вызова этого метода. Когда вы динамически создаете новый элемент, у него нет обработчика, потому что код с addEventListener уже выполнился ранее.

Элегантное решение — делегирование событий. Вместо того чтобы вешать обработчик на каждый дочерний элемент, вы вешаете один обработчик на их общего предка (родительский контейнер). Затем внутри обработчика вы определяете, по какому именно элементу был клик, и выполняете нужное действие. Благодаря "всплытию событий" (event bubbling), клик по любому дочернему элементу "всплывает" вверх по DOM-дереву и достигает родительского контейнера, где его ловит ваш обработчик.

Вот как это работает на примере вашего списка задач:

// Вешаем один обработчик на родительский контейнер <ul>
document.getElementById('todo-list').addEventListener('click', function(event) {
  // event.target — это элемент, по которому реально кликнули
  const target = event.target;
  
  // Проверяем, что кликнули именно по кнопке с классом 'delete-btn'
  if (target.classList.contains('delete-btn')) {
    // Удаляем родительский элемент <li>
    target.parentElement.remove();
  }
});

// Теперь добавление новых элементов работает без дополнительных действий
document.getElementById('add-btn').addEventListener('click', function() {
  const list = document.getElementById('todo-list');
  const newItem = document.createElement('li');
  newItem.innerHTML = 'Новая задача <button class="delete-btn">Удалить</button>';
  list.appendChild(newItem);
  // Обработчик сработает, потому что он висит на родителе <ul>
});

Почему это работает?

Когда пользователь кликает по новой кнопке "Удалить", событие click сначала срабатывает на самой кнопке, затем "всплывает" на элемент <li>, затем на <ul>. На <ul> висит наш обработчик. Он проверяет, является ли event.target (исходный элемент клика) кнопкой с нужным классом. Если да — выполняет удаление. Таким образом, нам не нужно вручную привязывать обработчики к новым элементам.

Важные моменты и улучшения

• Используйте closest() для сложной вложенности: Если ваша кнопка находится глубоко внутри нескольких оберток, лучше использовать target.closest('.delete-btn'), который ищет ближайший родительский элемент, соответствующий селектору. Это надежнее, чем проверка classList.contains.
• Не злоупотребляйте делегированием: Если у вас очень большая страница с тысячами элементов, один обработчик на корневой контейнер может работать медленнее, чем несколько точечных. Но для 99% случаев делегирование — оптимальный подход.
• Правильный выбор контейнера: Старайтесь вешать обработчик на максимально близкого общего предка, чтобы не обрабатывать лишние клики от других частей страницы. В вашем случае — это <ul>, а не <body>.
• Удаление обработчика: Если вы динамически удаляете родительский контейнер, не забудьте удалить и обработчик с помощью removeEventListener, чтобы избежать утечек памяти.

Пример с использованием closest() для надежности:

document.getElementById('todo-list').addEventListener('click', function(event) {
  const deleteBtn = event.target.closest('.delete-btn');
  if (deleteBtn) {
    deleteBtn.closest('li').remove(); // удаляем родительский <li>
  }
});

Этот подход решает вашу проблему элегантно и эффективно. Он также уменьшает количество обработчиков в памяти, что улучшает производительность, особенно при большом количестве динамических элементов.

function createTask(text) {
  const li = document.createElement('li');
  li.innerHTML = text + ' <button class="delete-btn">Удалить</button>';
  
  // Привязываем обработчик к новой кнопке
  const deleteBtn = li.querySelector('.delete-btn');
  deleteBtn.addEventListener('click', function() {
    li.remove();
  });
  
  return li;
}

document.getElementById('add-btn').addEventListener('click', function() {
  const list = document.getElementById('todo-list');
  const newItem = createTask('Новая задача');
  list.appendChild(newItem);
});