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

debugcn 发表于 Dev

PHP新手

我有一个简单的表单，我想删除我可能不需要的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}}

r3wt

您在这里遇到两个问题：

您正在将相同的ID分配给多个元素，这是无效的html，因为ID应该是唯一的。
这是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();
    }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。