DOM只注册一个点击事件删除元素

Question

I have a simple form, where I want to be able to remove DOM elements, that I might not need (eg. questions on a form).

This works only for the first element. After the first element is removed (clicked) it will be removed but then all further clicks are not registered.

The console will only display the first "click" as well.

I am using handlebars to generate some of the DOM elements in a loop, not sure if that would actually cause a issue, since I am able to see the elements in chrome inspector.

JS FUNCTION

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

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

  });

HTML -- HandleBars.

 {{#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

You've got two problems here:

1. you are assigning the same id to multiple elements, this is invalid html as id's are supposed to be unique.

2. This is a very common problem in javascript. the code only binds event listeners on the elements that were present in the page at the time the code ran. any newly added elements won't be present. the solution in this scenario is to remove the event listeners off the elements, and add a single listener on the document for click, then check the event target to see if it is one of the nodes you want.

I recommend to remove id of main from the elements, and give them all an identical class ie class="removable-form-item" , then use a global click listener like so:

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();
    }
});