我需要创建一个生成包含100个元素的列表的简单组件。每个元素都应包含一个按钮。如果用户单击该按钮，则会从DOM中删除该元素。此外，每三分之一的元素应该是可点击的。点击后应该调用一些动作，例如改变它的布局。
我创建了一个生成列表的按钮。现在我在删除元素时遇到问题，同时单击按钮。
let addButton = document.getElementById('btn');
addButton.addEventListener('click', function() {
for (let i = 0; i < 100; i++) {
let element = document.createElement("button");
let textElement = document.createTextNode("Click");
let classElement = document.createAttribute("class");
classElement.value = "buttonClick";
let paragraph = document.createElement("p");
let textParagraph = document.createTextNode("List element");
let classParagraph = document.createAttribute("class");
classParagraph.value = "paragraphList"
let number = i + 1;
paragraph.innerText = "List element number " + number;
element.innerText = "Click";
addButton.appendChild(paragraph);
addButton.appendChild(element);
};
});
let buttonRemove = document.getElementsByClassName("buttonClick");
buttonRemove.addEventListener('click', function() {
});<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<button id="btn">Generate list</button>
<script src="js/main.js"></script>
</body>
</html>您可以为每个元素分配一个ID
element.setAttribute('id','button'+i);我在for循环中的计数器
然后用node.remove(button4);的javascript删除按钮
https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
目前，您将按钮和段落元素直接附加到DOM。您应该将它们分组到div中，以使用divName.addEventListener（“click”，function）使可以单击的条目;要选择每个第三个元素，您可以使用模数运算符％，它返回除法的余数。
let addButton = document.getElementById('btn');
addButton.addEventListener('click', function() {
for (let i = 0; i < 100; i++) {
let container = document.createElement("div");
let element = document.createElement("button");
let paragraph = document.createElement("p");
let number = i + 1;
paragraph.innerText = "List element number " + number;
element.innerText = "Click";
document.body.appendChild(container);
container.appendChild(paragraph);
container.appendChild(element);
element.addEventListener("click", function(e) {
e.target.parentElement.remove();
});
if (number % 3 == 0) {
container.addEventListener("click", function(e) {
console.log("one of those third elements");
});
}
}
});<button id="btn">Generate list</button>