点击JavaScript动态生成的del元素清空页面所有内容该如何解决

问题根因 #

你通过闭包引用ele变量作为删除目标，同时使用clone(true)克隆元素时会同步克隆原有元素绑定的删除事件，后续克隆生成的Delete按钮，绑定的事件仍然指向旧的ele变量，触发时会删除错误节点，多次克隆后事件逻辑混乱，就会出现清空所有内容的问题。

修复方案 #

最小改动版本

不需要调整原有逻辑，仅修改删除目标的选择方式，从依赖闭包变量改为从点击事件的触发源向上查找所属行：

$(function() {
  $(".btn-copy").on('click', function() {
    var ele = $(this).closest('.example-2').clone(true);
    ele.find('input').val('')
    if (ele.find('button').length<2) {
      let btn = document.createElement("button");
      btn.innerHTML = "Delete";
      btn.onclick = (e) => {
        e.preventDefault()
        // 仅修改这一行即可
        $(e.target).closest('.example-2').remove()
      }
      ele[0].appendChild(btn);
    }
    $(this).closest('.example-2').after(ele);
  })
})

优化版本

为了避免后续克隆事件带来的其他隐患，可以改为不克隆旧事件，每次新增行时统一处理按钮逻辑：

$(function() {
  $(".btn-copy").on('click', function() {
    // 克隆时不携带旧事件，避免污染
    var ele = $(this).closest('.example-2').clone(false);
    ele.find('input').val('');
    // 移除克隆过来的旧删除按钮，防止重复添加
    ele.find('.del-btn').remove();
    let btn = document.createElement("button");
    btn.innerHTML = "Delete";
    btn.classList.add('del-btn', 'btn', 'btn-danger'); // 可自行加样式类
    btn.onclick = (e) => {
      e.preventDefault();
      $(e.target).closest('.example-2').remove();
    }
    ele.append(btn);
    $(this).closest('.example-2').after(ele);
  })
})

两种方案都可以实现点击删除仅移除当前行的需求，HTML部分无需修改。

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