如何使用JavaScript为实例化对象添加实例？Chrome扩展Trello列表删除按钮异常解决

你的代码出现这个异常是两个非常典型的DOM操作疏漏导致的：

• 所有新建的列表都被赋了完全相同的id newList，而HTML规范要求id在整个文档内是全局唯一的。当你后续调用document.getElementById('newList')时，浏览器永远只会返回文档中第一个匹配该id的元素，根本不会定位到你刚生成的新列表。
• 你已经通过document.createElement('DIV')拿到了新列表的完整DOM节点引用（也就是代码里的new_list变量），却绕了“给节点设死id→再通过全局id搜索节点→再挂按钮”的冗余路径，这不仅是无意义的性能损耗，还直接造成了所有删除按钮全部附着在第一个列表上的bug。

完全不需要实现“每次生成实例时拼接递增id、维护全局节点列表”这类复杂逻辑，直接复用已经持有的DOM引用完成操作即可，核心修改点完全不需要改动你现有的基础实例化逻辑：

btn.addEventListener('click', function() {
    // 直接创建新列表节点，移除原代码里 new_list.id = 'newList' 的硬编码id赋值
    const new_list = document.createElement('DIV');
    new_list.innerHTML = "CLICK";
    new_list.className = "list";

    // 创建删除按钮
    const delete_list = document.createElement('BUTTON');
    delete_list.className = "delList";

    // 直接通过闭包引用当前新建的列表，给删除按钮绑定删除逻辑，不需要额外全局变量存节点
    delete_list.addEventListener('click', function() {
        new_list.remove();
        listnum--;
    });

    listnum++;
    extendCont();
    // 直接把删除按钮挂到当前新建的列表节点上，不需要通过id全局查找元素
    new_list.appendChild(delete_list);
    document.getElementById('Lcontainer').appendChild(new_list);
}, false);

• 整个逻辑全程不需要为每个生成的实例维护唯一标识、也不需要额外的全局数组存储节点引用，所有关联操作都通过创建节点时的闭包作用域完成，完全不会提升实现复杂度。
• 后续如果需要批量操作所有列表实例，直接通过类选择器document.querySelectorAll('.list')获取所有节点即可，同样不需要依赖唯一id。

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