Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Challenge: Handle Event Propagation and Delegation | Event Handling and User Interactions in JavaScript
Advanced JavaScript Mastery

bookChallenge: 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.
index.html

index.html

index.css

index.css

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

index.html

index.css

index.css

index.js

index.js

copy

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 5

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

bookChallenge: 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.
index.html

index.html

index.css

index.css

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

index.html

index.css

index.css

index.js

index.js

copy

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 5
some-alt