Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: Event Propagation and Delegation | Events and Event Handling
Advanced JavaScript Mastery
course content

Conteúdo do Curso

Advanced JavaScript Mastery

Advanced JavaScript Mastery

1. Classes
2. DOM Manipulation
3. Events and Event Handling
4. Asynchronous JavaScript and APIs

bookChallenge: Event Propagation and Delegation

Task

You're building a dynamic list where users can add and delete specific items.

  1. Use event delegation by adding a single click event listener to the ul with ID dynamic-list;
  2. When an item is clicked:
    • If the clicked element is an <li>, show an alert with the text of the clicked item;
    • If the clicked element is a "Delete" button, remove the corresponding <li> item from the list.
html

index

css

index

js

index

copy
  • Use event.target.tagName === 'LI' to check if the clicked element is an <li>;
  • Use event.target.classList.contains('delete-btn') to check if the clicked element is a "Delete" button.
html

index

css

index

js

index

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 5
We're sorry to hear that something went wrong. What happened?
some-alt