创建另一个事件监听器时，Javascript 事件监听器消失

Question

我正在尝试创建一个脚本，其中选择的 HTML 对象检测更改、获取其值并创建另一个标签以根据其值进行显示。例如。用户选择“英国”和 div 中显示的标签。这可行，但我有一个 X 按钮，单击时会使用 EventListener 删除标签。问题是我只能删除创建的最终标签，因为用于创建每个标签 ID 的变量会发生变化，因此只有最后一个有效。部分代码如下:

 document.getElementById("locations-editor-container1").innerHTML = 
    document.getElementById("locations-editor-container1").innerHTML+"<div 
    class='locations-editor-country-disp' id='"+country+"[@]'>"+country+"<svg  
   id='"+country+"[##]' class='locations-editor-x-button' 
   style='width:2vh;position:absolute;right:0.5vw;vertical-align:middle;' 
   viewBox='0 0 24 24'><path fill='#FFFFFF' 


      d='M19,6.41L17.59,5L12,10.59L6.41,
      5L5,6.41L10.59, 12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/></svg></div><br>";
            var countryId=country+"[##]";
            
     document.getElementById(countryId).addEventListener("click",function(){ remove(countryId)},false);

Answer 1

下面是您的错误重现，因为您正在替换某些内容的innerHTML，您正在删除要替换的元素的事件监听器。这就是为什么只有最后一个元素起作用:

const content = document.querySelector("#content");
var counter = 0;
const add = e => {
  content.innerHTML = 
      //you are replacing content, thus removing the event listeners of 
      //  previous elements
      content.innerHTML +
    `<div style="cursor: pointer;" id="div${++counter}">
        click me ${counter}
    </div>`;
  document.querySelector(`#div${counter}`)
  .addEventListener(
    "click"
    ,(x=>e=>{
      alert(`Counter for this div:${x}`);
    })(counter)
  );
}
document.querySelector("#myButton").addEventListener(
  "click"
  ,add
);

<div id="content">
</div>
<input type="button" id="myButton" value="add">

解决方案是不替换内容，而是将新项目添加到现有内容中:

    const content = document.querySelector("#content");
    var counter = 0;
    const add = e => {
      //create a div (will not be added to dom yet)
      const div = document.createElement("div");
      div.innerHTML = 
        `<div style="cursor: pointer;" id="div${++counter}">
          click me ${counter}
        </div>`;
      div
      .addEventListener(
        "click"
        ,(x=>e=>{
          alert(`Counter for this div:${x}`);
        })(counter)
      );
      //add element to dom (do not replace content)
      content.appendChild(div);
    }
    document.querySelector("#myButton").addEventListener(
      "click"
      ,add
    );

    <div id="content">
    </div>
    <input type="button" id="myButton" value="add">