将第二个项目添加到 div 时，JavaScript 事件处理程序不起作用？

Question

So basically when I run this code it adds a button to a div and when you press the button it removes itself as expected.

 document.getElementById("inputdiv").innerHTML += '<button type="button" id="remove">X1</button>' document.getElementById("remove").addEventListener("click", function () { document.getElementById("remove").remove(); });

 <div id="inputdiv"></div>

However when you add two buttons X1 event handler stops working but X2 works fine?

I believe when the second button is added it some how effects there first button event handler but not sure why?

 document.getElementById("inputdiv").innerHTML += '<button type="button" id="remove">X1</button>' document.getElementById("remove").addEventListener("click", function () { document.getElementById("remove").remove(); }); document.getElementById("inputdiv").innerHTML += '<button type="button" id="remove2">X2</button>' document.getElementById("remove2").addEventListener("click", function () { document.getElementById("remove2").remove(); });

 <div id="inputdiv"></div>

Answer 1

innerHTML does not append instead reloads the full DOM. That's why the event does not work. You can use insertAdjacentHTML() instead:

 document.getElementById("inputdiv").innerHTML += '<button type="button" id="remove">X1</button>' document.getElementById("remove").addEventListener("click", function () { document.getElementById("remove").remove(); }); document.getElementById("inputdiv").insertAdjacentHTML('beforeend', '<button type="button" id="remove2">X2</button>'); document.getElementById("remove2").addEventListener("click", function () { document.getElementById("remove2").remove(); });

 <div id="inputdiv"></div>