01
Build a todo list where items can be added and deleted using event delegation.
Show answer
One listener on the list handles all delete buttons:
const form = document.querySelector('#todo-form');
const list = document.querySelector('#todo-list');
form.addEventListener('submit', (e) => {
e.preventDefault();
const li = document.createElement('li');
li.textContent = form.task.value;
const btn = document.createElement('button');
btn.textContent = 'Delete';
btn.className = 'delete';
li.append(btn);
list.append(li);
form.reset();
});
list.addEventListener('click', (e) => {
if (e.target.matches('.delete')) e.target.closest('li').remove();
});