MoreLesson 272Free preview

Closable List Items

This lesson is part of How To · All levels

Summary

Closable list items allows users to delete items from the list by pressing the close button. Each item has a button, then JavaScript searches for the nearest <li> element and deletes it from the DOM. Use event delegation so that one listener can handle all the buttons, including items added later.

Key points

The shut button should be <button> so that it can be accessed with a keyboard.
Closest('li') search for parent list items from the button clicked.
Remove() deletes the elements and all content from the DOM.
Event delegation on the container reduces the number of listeners and supports new items.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.