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

Contenido del Curso

Advanced JavaScript Mastery

Advanced JavaScript Mastery

3. Event Handling and User Interactions in JavaScript
4. Asynchronous JavaScript and API Integration

book
Challenge: Handle 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.html

css

index.css

js

index.js

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.html

css

index.css

js

index.js

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 5
We're sorry to hear that something went wrong. What happened?
some-alt