克隆含文件输入的Div后，删除按钮点击事件失效问题排查

你遇到的核心问题是动态生成的元素无法绑定页面初始化阶段设置的事件。当前代码里，你在页面加载完成后就查询所有.cancellaInputClone按钮并绑定点击事件，但克隆出来的删除按钮是点击克隆按钮后才创建的——这些按钮在页面初始化时根本不存在，所以事件自然绑定不上。

方案一：生成删除按钮时直接绑定事件 #

在创建完删除按钮后，立刻给它添加点击事件，确保每个新生成的按钮都自带事件监听：

if (document.querySelector('.clona-input-file') !== null) {
    var clonaInputFile = document.querySelector('.clona-input-file');
    clonaInputFile.addEventListener('click', function(e) {
        e.preventDefault();
        var RowDaClonare = document.querySelector('#row-da-clonare');
        var clone = RowDaClonare.cloneNode(true);
        clone.children[0].lastElementChild.value = '';
        clone.id = 'row-da-clonare-' + Date.now();
        RowDaClonare.after(clone);

        var _buttonDel = document.createElement("button");
        _buttonDel.id = 'cancellaInputClone-' + Date.now(); // 注意id必须唯一，避免重复
        _buttonDel.type = 'button';
        _buttonDel.setAttribute("data-id-da-eliminare", clone.id);
        _buttonDel.classList.add("btn", "btn-danger", "cancellaInputClone"); // 可一次性添加多个类名
        _buttonDel.innerHTML = '<i class="bi bi-trash-fill"></i>';
        
        // 关键：生成按钮后直接绑定点击事件
        _buttonDel.addEventListener('click', fx_button);
        
        clone.appendChild(_buttonDel);
    });
}

function fx_button() {
    // 新增删除逻辑：根据data-id移除对应行
    const targetId = this.getAttribute('data-id-da-eliminare');
    document.getElementById(targetId)?.remove();
    console.log(this);
}

方案二：使用事件委托（更推荐） #

利用事件冒泡机制，给静态的父元素绑定事件，监听动态元素的点击。这种方式无需给每个新按钮单独绑定事件，更高效：

if (document.querySelector('.clona-input-file') !== null) {
    var clonaInputFile = document.querySelector('.clona-input-file');
    clonaInputFile.addEventListener('click', function(e) {
        e.preventDefault();
        var RowDaClonare = document.querySelector('#row-da-clonare');
        var clone = RowDaClonare.cloneNode(true);
        clone.children[0].lastElementChild.value = '';
        clone.id = 'row-da-clonare-' + Date.now();
        RowDaClonare.after(clone);

        var _buttonDel = document.createElement("button");
        _buttonDel.id = 'cancellaInputClone-' + Date.now();
        _buttonDel.type = 'button';
        _buttonDel.setAttribute("data-id-da-eliminare", clone.id);
        _buttonDel.classList.add("btn", "btn-danger", "cancellaInputClone");
        _buttonDel.innerHTML = '<i class="bi bi-trash-fill"></i>';
        clone.appendChild(_buttonDel);
    });
}

// 选择一个静态的父容器（建议用这些行的直接父元素，而非body，更精准）
document.body.addEventListener('click', function(e) {
    // 判断点击的元素是否为删除按钮（包括按钮内部的图标）
    const deleteBtn = e.target.closest('.cancellaInputClone');
    if (deleteBtn) {
        const targetId = deleteBtn.getAttribute('data-id-da-eliminare');
        document.getElementById(targetId)?.remove();
        console.log(deleteBtn);
    }
});

事件委托的优势是：不管后续生成多少动态元素，都不需要重复绑定事件，尤其适合频繁添加/删除元素的场景。

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