Вы реализуете список задач (˂ul id="todo"˃), элементы - Ответ на вопрос по РВПЯJS №2496304

Вопрос

Вы реализуете список задач (˂ul id="todo"˃), элементы (˂li˃) и кнопки удаления (.del) добавляются динамически через JS (jаvascript) после загрузки страницы. Требования заказчика (см. ниже): • удалять ровно ту задачу, по кнопке которой кликнули; • обработчик должен работать и для задач, созданных позже; • учесть, что внутри .del может быть иконка (˂svg˃), по которой тоже кликают.
Какой вариант соответствует требованиям?

• document.querySelectorAll('#todo .del').forEach(btn =˃ { btn.addEventListener('click', () =˃ btn.closest('li').remove()); });
• const list = document.getElementById('todo'); list.addEventListener('click', (e) =˃ { if (e.currentTarget.classList.contains('del')) { e.currentTarget.closest('li').remove(); } });
• document.addEventListener('click', (e) =˃ { const btn = e.target.closest('.del'); const list = document.getElementById('todo'); if (!btn || !list.contains(btn)) return; const item = btn.closest('li'); if (item) item.remove(); });
• const list = document.getElementById('todo'); list.onclick = (e) =˃ { if (e.target.classList.contains('del')) e.target.parentElement.remove(); };
• const list = document.getElementById('todo'); list.addEventListener('click', ({ target }) =˃ { if (target.matches('.del')) target.remove(); });

Ответ