Completing and deleting a task - DOM
Use event delegation with a single listener for completion and deletion.
Event delegation on the list
Instead of attaching a listener to every li, we set a single listener on the ul. This pattern is called event delegation. When a click bubbles up, the list listener catches it.
Inside the listener, event.target gives us the actual clicked element. We check target.tagName === "LI" to tell whether the clicked item is a task.
A single click will toggle classList.toggle("done"); a double click will remove with list.removeChild(target).
Deleting a task
To delete a task on a double click, we call list.removeChild(target). removeChild is called on a parent and takes the child to remove. list is the parent, target is the child.
We'll use two separate listeners: "click" and "dblclick". Both work through event.target; only the event type differs.
So a single click marks done, a double click deletes.
Exercise Add complete and delete
Continue on top of the previous lesson's solution. Add a "click" listener on list: if the clicked element is LI, call classList.toggle("done"). Then add a "dblclick" listener: if the clicked element is LI, remove it with list.removeChild(target). Use event.target in both.
Show example solution
Write list.addEventListener('click', function(event) { const target = event.target; if (target.tagName === 'LI') target.classList.toggle('done'); }). For dblclick, similarly call list.removeChild(target).
Example solution:
// Todo application
const app = document.getElementById("app");
const title = document.createElement("h1");
title.textContent = "Todo list";
app.appendChild(title);
const input = document.createElement("input");
input.placeholder = "New task";
const addButton = document.createElement("button");
addButton.textContent = "Add";
const list = document.createElement("ul");
app.appendChild(input);
app.appendChild(addButton);
app.appendChild(list);
function addTask() {
const text = input.value;
if (text === "") return;
const item = document.createElement("li");
item.textContent = text;
list.appendChild(item);
input.value = "";
}
addButton.addEventListener("click", addTask);
list.addEventListener("click", function(event) {
const target = event.target;
if (target.tagName === "LI") {
target.classList.toggle("done");
}
});
list.addEventListener("dblclick", function(event) {
const target = event.target;
if (target.tagName === "LI") {
list.removeChild(target);
}
});Test yourself
-
What does event.target give?
list.addEventListener("click", function(event) { const target = event.target; });- The element the listener is attached to
- The number of clicks
- The event type (e.g. 'click')
- The actual clicked element
Show answer
The actual clicked element — Correct! event.target gives the actual clicked element.
-
Toggle the done class
target.classList.____("done");Show answer
target.classList.toggle("done"); -
Match click type to result
- click
- Toggle done class
- dblclick
- Delete the task
- event.target
- Gives clicked element