Challenge: Add and Remove DOM Elements
Task
You're building a shopping cart where users can add and remove items.
Add an Item to the Cart:
Create a new
<li>element;Create a new
<button>element;Add new
<button>element to the new<li>element;Add a new
<li>element to the<ul>with thecart-listID.
Remove an Item from the Cart: Delete the specific
<li>element from the<ul>.
index.html
index.css
index.js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>Shopping Cart</h1>
<input
type="text"
id="product-name-input"
placeholder="Enter product name"
/>
<button id="add-to-cart-btn">Add to Cart</button>
<ul id="cart-list"></ul>
<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: 'Verdana', sans-serif;
background-color: #f9fafc;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
color: #333;
}
h1 {
font-size: 2rem;
color: #007bff;
margin-bottom: 1rem;
}
input[type='text'] {
padding: 10px;
font-size: 1rem;
border: 1px solid #ced4da;
border-radius: 4px;
width: 250px;
margin-bottom: 1rem;
}
button {
padding: 10px 15px;
font-size: 1rem;
border: none;
border-radius: 4px;
color: #fff;
background-color: #28a745;
cursor: pointer;
transition: background-color 0.3s ease;
}
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
// Add an item to the cart
const addToCartBtn = document.getElementById('add-to-cart-btn');
const cartList = document.getElementById('cart-list');
const productNameInput = document.getElementById('product-name-input');
addToCartBtn.addEventListener('click', function () {
// Create a new <li> element and set its text to input value
const cartItem = document._____('li');
cartItem.textContent = productNameInput.value;
// Create "Remove" button for the cart item
const removeBtn = document._____('button');
removeBtn.textContent = 'Remove';
// Append the "Remove" button to the cart item
cartItem._____(removeBtn);
// Append the new item to the cart list
cartList._____(cartItem);
// Clear the input field
productNameInput.value = '';
// Add click event to "Remove" button to delete the item
removeBtn.addEventListener('click', function () {
cartList._____(cartItem); // Remove the specific <li> item
});
});
Use
createElementto create a new<li>element;Use
createElementto create a new<button>element;Use
appendChildto add new<button>element to the<li>element;Use
appendChildto add a new<li>element to the<ul>with the IDcart-list;Use
removeChildto delete the specific<li>element from the<ul>.
index.html
index.css
index.js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>Shopping Cart</h1>
<input
type="text"
id="product-name-input"
placeholder="Enter product name"
/>
<button id="add-to-cart-btn">Add to Cart</button>
<ul id="cart-list"></ul>
<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: 'Verdana', sans-serif;
background-color: #f9fafc;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
color: #333;
}
h1 {
font-size: 2rem;
color: #007bff;
margin-bottom: 1rem;
}
input[type='text'] {
padding: 10px;
font-size: 1rem;
border: 1px solid #ced4da;
border-radius: 4px;
width: 250px;
margin-bottom: 1rem;
}
button {
padding: 10px 15px;
font-size: 1rem;
border: none;
border-radius: 4px;
color: #fff;
background-color: #28a745;
cursor: pointer;
transition: background-color 0.3s ease;
}
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
// Add an item to the cart
const addToCartBtn = document.getElementById('add-to-cart-btn');
const cartList = document.getElementById('cart-list');
const productNameInput = document.getElementById('product-name-input');
addToCartBtn.addEventListener('click', function () {
// Create a new <li> element and set its text to input value
const cartItem = document.createElement('li');
cartItem.textContent = productNameInput.value;
// Create "Remove" button for the cart item
const removeBtn = document.createElement('button');
removeBtn.textContent = 'Remove';
// Append the "Remove" button to the cart item
cartItem.appendChild(removeBtn);
// Append the new item to the cart list
cartList.appendChild(cartItem);
// Clear the input field
productNameInput.value = '';
// Add click event to "Remove" button to delete the item
removeBtn.addEventListener('click', function () {
cartList.removeChild(cartItem); // Remove the specific <li> item
});
});
Tutto è chiaro?
Grazie per i tuoi commenti!
Sezione 2. Capitolo 11
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
