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

Question

基本上，当我运行这段代码时，它会向 div 添加一个按钮，当你按下按钮时，它会按预期自行删除。

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>

但是，当您添加两个按钮时，X1 事件处理程序停止工作但 X2 工作正常？

我相信当添加第二个按钮时，它会如何影响第一个按钮事件处理程序，但不确定为什么？

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 不会附加而是重新加载完整的 DOM。这就是事件不起作用的原因。您可以使用 insertAdjacentHTML()相反:

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>