I have a list of products, each product having an id and item property. I have to add a remove button for every item. With every click of the remove button, that product should be removed.
I’m trying to loop though the list and for each product I’m creating a button element and setting its id attribute to the id of the product.
However, for some reason, the event listener is not getting added to the buttons except the last button (button#5) .
Below is the JS code I have written..
const div = document.body.querySelector('div');
let products = [
{
id: "1",
item: "Shirt"
},
{
id: "2",
item: "Jeans"
},
{
id: "3",
item: "T-shirt"
},
{
id: "4",
item: "Denim Jacket"
},
{
id: "5",
item: "Casual Shoes"
}
];
const removeItem = (itemId) => {
products = products.filter((prod) => {
return prod.id !== itemId;
})
console.log(products)
updateDom();
}
function updateDom() {
div.innerHTML = '';
div.style.padding = '20px';
for (let prod of products) {
let btn = document.createElement('button');
btn.id = prod.id;
btn.textContent = 'Remove';
btn.addEventListener('click', () => {
removeItem(btn.id);
console.log(btn.id);
})
div.innerHTML += `<li>${prod.item}</li> `
div.appendChild(btn);
}
}
updateDom();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script src="prac.js"></script>
</body>
</html>
Above is the html code where I’m trying to append the li and the button elements to the div. Why is the event listener only getting added to the last button element and not to every buttons? Am I missing something here? Thankyou for your time.