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
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 3. Kapitel 5
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 2.22
Challenge: Handle Event Propagation and Delegation
Svep för att visa menyn
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
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 3. Kapitel 5