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
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 3. Capítulo 5