如何获取动态生成元素的引用以实现删除功能？

核心问题分析 #

• onclick提前执行：你在拼接HTML时直接调用了deleteFnc(f.name)，这会导致函数在图片上传时立即执行，而非点击删除标签时触发。正确做法是将函数调用作为字符串绑定，或更推荐用事件委托方案。
• 选择器错误：$("uploadedList")缺少ID选择符#，应该是$("#uploadedList")，否则无法定位目标容器。
• 事件委托参数获取失败：之前使用事件委托时未正确传递文件名，可通过给删除按钮添加data-*属性存储文件名，在事件处理中读取该属性。

修正后的代码 #

JavaScript代码

var storeimg = [];

// 图片上传处理
$("#fileupload").on("change", function handleImgFileSelect(e) {
  var ufiles = e.target.files;
  var filesArr = Array.prototype.slice.call(ufiles);
  var reg = /(.*?)\/(jpg|jpeg|png|bmp)$/;

  filesArr.forEach(function(f) {
    if (!f.type.match(reg)) {
      alert("仅支持jpg/jpeg/png/bmp格式图片");
      document.getElementById("fileupload").value = "";
      return;
    }

    storeimg.push(f);
    console.log('foundfile=' + f.name);
    var reader = new FileReader();
    reader.readAsDataURL(f);

    reader.onload = function(e) {
      // 用容器包裹图片和删除按钮，给删除按钮添加data属性存文件名
      var itemHtml = `
        <div class="img-item">
          <img src="${e.target.result}" width="50px" height="50px" class="uploadedimg">
          <small class="deleteimg" style="cursor: pointer" data-filename="${f.name}">点击删除</small>
        </div>
      `;
      $("#uploadedList").append(itemHtml);
    }
  });
});

// 事件委托处理删除点击
$("#uploadedList").on("click", ".deleteimg", function() {
  var fileName = $(this).data('filename');
  // 同步更新storeimg数组
  storeimg = storeimg.filter(file => file.name !== fileName);
  // 移除当前图片及删除按钮的容器
  $(this).closest(".img-item").remove();
  alert(`已删除图片：${fileName}`);
});

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="submitform">
  <input type="text" id="submitReviewWriter" name="reviews" class="form-control" placeholder="Comment">
  <div class="text-center">
    <input type='file' id='fileupload' name="fileupload[]" multiple="multiple" accept=".png, .jpg, .jpeg" />
    <div id="uploadedList" class='uploadedList'></div>
    <button id="submitReview" type="submit" class="btn btn-main text-center">submitComment</button>
  </div>
</form>

关键修改说明 #

1. 添加图片容器：给每个图片和删除按钮包裹.img-item容器，删除时可一次性移除整个元素。
2. data属性存储标识：删除按钮通过data-filename存储对应图片的文件名，事件委托中直接读取该属性获取唯一标识。
3. 事件委托绑定：将点击事件绑定到静态容器#uploadedList上，监听动态生成的.deleteimg元素，避免重复绑定事件。
4. 数据与视图同步：删除操作同时更新storeimg数组，保证内存数据与页面视图一致。

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