Intermediate
A to-do list with one listener
The Add form already adds new items. Now, with one click listener on #list (event delegation):
- Clicking an item's ✕ button removes that item.
- Clicking an item's text toggles the class done on its <li>.
It must also work for items added after the page loaded.
What Check tests
- ✕ removes its own item
- Clicking the text toggles
done - Items added later can be removed
- Items added later can be marked done
- Clicking empty space in the list causes no error
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.