DOM仅注册一个单击事件删除元素

Question

我有一个简单的表单，我想删除我可能不需要的DOM元素（例如，表单上的问题）。

这仅适用于第一个元素。删除（单击）第一个元素后，该元素将被删除，但随后的所有单击都不会被注册。

控制台也将只显示第一个“单击”。

[我正在使用把手在循环中生成某些DOM元素，不确定是否会真正引起问题，因为我能够在chrome inspector中看到这些元素。

JS功能

let allItems = document.getElementById("main");

allItems.addEventListener("click",function(e){
    console.log("click");
      e.target.parentElement.remove();
      e.preventDefault();

  });

HTML-把手。

 {{#each all}}
        <div id="main">
            <p class="delete">&#x2718;</p>
            <span class="select">
                <select>
                    <option value="0"></option>Selection</option>
                </select>
            </span>
        </div>
  {{/each}}

Answer 1

您在这里有两个问题：

1. 您正在向多个元素分配相同的ID，这是无效的html，因为ID应该是唯一的。

2. 这是JavaScript中非常普遍的问题。该代码仅将事件侦听器绑定到代码运行时页面中存在的元素上。任何新添加的元素都不会出现。在这种情况下，解决方案是从元素上除去事件侦听器，并在文档上添加单个侦听器以供单击，然后检查事件目标以查看它是否是您想要的节点之一。

我建议从元素中删除main的ID，并为它们提供相同的类，即class="removable-form-item"，然后像这样使用全局点击侦听器：

document.body.addEventListener('click',function(event){
    if(event.target.classList.contains("removable-form-item")){
        //got a click on our target name
        // your code to remove the item here
        e.target.parentElement.remove();
        e.preventDefault();
    }
});