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
ulwith 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.
index.html
index.css
index.js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul id="dynamic-list">
<li>Item 1 <button class="delete-btn">Delete</button></li>
<li>Item 2 <button class="delete-btn">Delete</button></li>
</ul>
<button id="add-item">Add Item</button>
<script src="index.js"></script>
</body>
</html>
99
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
28
29
30
31
32
33
34
35
36
body {
font-family: 'Arial', sans-serif;
background-color: #f0f4f8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
color: #333;
}
ul {
list-style-type: none;
padding: 0;
margin: 20px 0;
width: 300px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
#dynamic-list li {
padding: 12px;
margin: 8px 0;
background-color: #f9fafb;
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s ease;
color: #1f2937;
}
#dynamic-list li:hover {
background-color: #e5efff;
}
99
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
28
const dynamicList = document.getElementById('dynamic-list');
const addItemButton = document.getElementById('add-item');
let itemCount = 2;
addItemButton.addEventListener('click', () => {
itemCount++;
const newItem = document.createElement('li');
newItem.textContent = `Item ${itemCount} `;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.classList.add('delete-btn');
newItem.appendChild(deleteButton);
dynamicList.appendChild(newItem);
});
// Event delegation to handle item and delete button clicks
_____.addEventListener('click', event => {
if (_____) {
alert(`You clicked on: ${event.target.firstChild.textContent}`);
}
if (event.target.classList.contains('delete-btn')) {
const listItem = event.target.parentNode;
dynamicList.removeChild(listItem);
}
});
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
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul id="dynamic-list">
<li>Item 1 <button class="delete-btn">Delete</button></li>
<li>Item 2 <button class="delete-btn">Delete</button></li>
</ul>
<button id="add-item">Add Item</button>
<script src="index.js"></script>
</body>
</html>
99
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
28
29
30
31
32
33
34
35
36
body {
font-family: 'Arial', sans-serif;
background-color: #f0f4f8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
color: #333;
}
ul {
list-style-type: none;
padding: 0;
margin: 20px 0;
width: 300px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
#dynamic-list li {
padding: 12px;
margin: 8px 0;
background-color: #f9fafb;
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s ease;
color: #1f2937;
}
#dynamic-list li:hover {
background-color: #e5efff;
}
99
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
28
29
const dynamicList = document.getElementById('dynamic-list');
const addItemButton = document.getElementById('add-item');
let itemCount = 2;
// Add new items to the list
addItemButton.addEventListener('click', () => {
itemCount++;
const newItem = document.createElement('li');
newItem.textContent = `Item ${itemCount} `;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.classList.add('delete-btn');
newItem.appendChild(deleteButton);
dynamicList.appendChild(newItem);
});
// Event delegation to handle item and delete button clicks
dynamicList.addEventListener('click', event => {
if (event.target.tagName === 'LI') {
alert(`You clicked on: ${event.target.firstChild.textContent}`);
}
if (event.target.classList.contains('delete-btn')) {
const listItem = event.target.parentNode;
dynamicList.removeChild(listItem);
}
});
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 3. Kapitel 5
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
