Event delegation

Model answer. Event delegation means attaching one listener to a common ancestor instead of one listener per child, and using the event's bubbling to find out which child was clicked.

document.querySelector('#todo-list').addEventListener('click', event => {
  const button = event.target.closest('button.delete');
  if (!button || !event.currentTarget.contains(button)) return;   // click was elsewhere
  button.closest('li').remove();
});

Benefits:

• Fewer listeners, so less memory for long lists.
• Works for elements added later, with no need to attach listeners to new rows.
• One place for the logic.

Details that matter:

• Use event.target.closest(selector), because the actual target may be an icon or text inside the button.
• event.currentTarget is the element with the listener (the list); event.target is where the click happened.
• It only works for events that bubble.