（Javascript）通过“document.createElement（”div“）”添加一些元素后重新初始化循环

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>