Challenge: Handle Event Propagation and Delegation
Task
You're building a dynamic list where users can add and delete specific items.
- Use event delegation by adding a single click event listener to the
ul
with IDdynamic-list
; - 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.
- If the clicked element is an
index.html
index.css
index.js
- 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.
index.html
index.css
index.js
Tutto è chiaro?
Grazie per i tuoi commenti!
Sezione 3. Capitolo 5
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Awesome!
Completion rate improved to 2.22
Challenge: Handle Event Propagation and Delegation
Scorri per mostrare il menu
Task
You're building a dynamic list where users can add and delete specific items.
- Use event delegation by adding a single click event listener to the
ul
with IDdynamic-list
; - 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.
- If the clicked element is an
index.html
index.css
index.js
- 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.
index.html
index.css
index.js
Tutto è chiaro?
Grazie per i tuoi commenti!
Sezione 3. Capitolo 5