JavaScript使用createElement生成元素后删除按钮不生效如何解决？

问题根因 #

你当前所有动态生成的预览图、删除按钮、file输入框、换行符都是零散挂载在#images节点下，没有将同组关联元素绑定，也没有给删除按钮绑定对应删除当前组的逻辑，因此点击删除时无法准确定位到对应元素。

修复方案 #

将每组上传相关的元素统一放在一个独立的父容器中，删除时直接移除该父容器即可，逻辑简单不易出错。

完整可运行代码 #

JavaScript 代码 #

document.getElementById("add_image").onclick = function (ev) {
  const imageContainer = document.getElementById("images");
  // 给每组上传元素创建独立父容器
  const group = document.createElement("div");
  group.className = "upload-group";

  const preview = document.createElement("img");
  preview.style.width = "auto";
  preview.style.height = "100px";

  const newInput = document.createElement("input");
  newInput.type = "file";
  newInput.name = "file[]";

  const delbutton = document.createElement("button");
  delbutton.appendChild(document.createTextNode("delete"));
  // 绑定删除逻辑：直接删除当前组父容器
  delbutton.onclick = function() {
    group.remove();
  }

  newInput.onchange = function (ev1) {
    if(this.files && this.files[0]){
      const fileReader = new FileReader();
      fileReader.onload = function (ev2) {
        preview.src = ev2.target.result;
      };
      fileReader.readAsDataURL(this.files[0])
    }
  };

  // 所有元素都放到组容器里
  group.appendChild(preview);
  group.appendChild(delbutton);
  group.appendChild(newInput);
  group.appendChild(document.createElement("br"));
  group.appendChild(document.createElement("br"));

  imageContainer.appendChild(group);
}

// 可选：给默认存在的第一个file输入框也加上删除功能
window.onload = function() {
  const firstInput = document.querySelector('#images input[type="file"]');
  const firstGroup = document.createElement("div");
  firstGroup.className = "upload-group";
  const firstDelBtn = document.createElement("button");
  firstDelBtn.innerText = "delete";
  firstDelBtn.onclick = function() {
    firstGroup.remove();
  }
  // 把原有元素移到组容器
  const firstPreview = document.createElement("img");
  firstPreview.style.width = "auto";
  firstPreview.style.height = "100px";
  firstGroup.appendChild(firstPreview);
  firstGroup.appendChild(firstDelBtn);
  firstGroup.appendChild(firstInput);
  firstGroup.appendChild(document.createElement("br"));
  firstGroup.appendChild(document.createElement("br"));
  document.getElementById("images").appendChild(firstGroup);
  // 给第一个输入框绑定预览逻辑
  firstInput.onchange = function (ev1) {
    if(this.files && this.files[0]){
      const fileReader = new FileReader();
      fileReader.onload = function (ev2) {
        firstPreview.src = ev2.target.result;
      };
      fileReader.readAsDataURL(this.files[0])
    }
  };
  // 清理原来的冗余换行符
  document.querySelectorAll('#images > br').forEach(br => br.remove());
}

HTML 代码（和原代码一致无需修改） #

<div>
  <h1>Add Product</h1>
  <input type="text"><br><br>
  <div id="images">
    <input type="file" name="file[]"><br><br>
  </div>
  <button type="button" id="add_image">+Add Image</button><br><br>
</div>

补充说明 #

如果不需要给初始默认的第一个file输入框加删除功能，直接删除window.onload部分的代码即可，动态新增的组删除功能不受影响。

内容的提问来源于stack exchange，提问作者user17408361