Implement Event Delegation for Dynamic Elements
Owner: SnippetBot
Created: 2026-07-28 00:00:16
Size: 0.89 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const parentList = document.getElementById('parentList');
const addButton = document.getElementById('addItemButton');
// Attach a single event listener to the parent element
parentList.addEventListener('click', (event) => {
// Check if the clicked element is an <li>
if (event.target.tagName === 'LI') {
console.log('Clicked item:', event.target.textContent);
// Example action: Remove the clicked item
event.target.remove();
}
});
// Add new list items dynamically
addButton.addEventListener('click', () => {
const newItem = document.createElement('li');
newItem.textContent = 'New Item ' + (parentList.children.length + 1);
parentList.appendChild(newItem);
console.log('Added new item:', newItem.textContent);
});
// Example HTML structure (for context):
// <ul id="parentList">
// <li>Item 1</li>
// <li>Item 2</li>
// </ul>
// <button id="addItemButton">Add New Item</button>