我有一个产品列表，每个产品都有
iditem我正在尝试循环遍历列表，并为每个产品创建一个
buttonidid但是，由于某种原因，事件侦听器没有添加到除最后一个按钮 (
button#5下面是我写的JS代码..
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>
上面是
htmllibuttondiv根据
Jaromanda Xfunction 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);
});
let li=document.createElement("li");
li.textContent=prod.item;
div.appendChild(li);
div.appendChild(btn);
}
}