(Javascript)通过 div ")"添加一些元素后重新初始化循环"document.createElement("

Question

我目前正在努力解决一个问题，这个问题对我来说很难描述，但我尽力了。

我建立了一个像这样的循环:

for (var j = 0; j < button_remove_ingredient.length; j++) {
button_remove_ingredient[j].addEventListener("click", () => {
button_remove_ingredient = document.querySelectorAll(".remove_ingredient");
document.querySelectorAll(".ingredient_list")[j].remove();
})
}

问题是，循环是加载后的时刻DOM创建和在这个时候button_remove_ingredient有1的长度，因为在HTML中只有一个按钮。

还有一个函数，在按下另一个按钮后创建该按钮的克隆。

所以在这种情况下，有可能有几个button_remove_ingredient，但只有当用户真正与界面交互时。

现在，只有第一个按钮触发eventListener，其他的不是，当我在eventlistener里面console.log(j)，它总是显示我1。

我想尝试用foreach循环，但它也不起作用。

如果有人能理解我的问题，并有一个好的解决方案，我将非常高兴。

Answer 1

我使用eventListener检查事件目标的classList，以便删除它。

请检查下面的代码片段:

document.body.addEventListener('click',  () => {
if(this.event.target.classList.contains("remove_ingredient")){
this.event.target.remove()
}

}, true); 
function addButton(){
document.getElementById("container").innerHTML += '<button class="remove_ingredient">New Button</button>';

}

<div id="container">
<button class="remove_ingredient">Button 1</button>
<button class="remove_ingredient">Button 2</button>
<button class="remove_ingredient">Button 3</button>
</div>
<button onclick="addButton()">Add new button</button>