JavaScript：类实例多次创建时，元素移除操作失效问题

问题现象 #

当快速连续调用clickedCookie()（比如每秒多次）时，部分按钮无法被删除，甚至无法正常移动。控制台能打印出对应的元素对象，但后续的DOM操作（移动、删除）完全失效。

核心原因 #

问题出在document.body.innerHTML += ...这个操作上：
每次执行该语句，浏览器会把当前body的HTML内容拼接新字符串后，重新解析并重建整个body内的DOM树。这意味着之前创建的按钮元素会被销毁后重新创建，而cookie实例中保存的this.element还是指向原来被销毁的旧元素引用——虽然控制台打印时看起来像正常元素，但它已经和当前DOM树脱离关联，后续的moveCookie和deleteCookie操作自然无法作用到页面上的真实元素。

解决方案 #

放弃使用innerHTML +=添加元素，改用原生DOM API直接创建并插入元素，这样不会破坏已有的DOM结构和元素引用。

修改后的完整代码 #

let maxIndex = 0;

class Cookie {
    constructor(index) {
        this.index = index;
        this.element = null;
    }
    addToScreen = () => {
        // 直接创建button元素
        this.element = document.createElement('button');
        this.element.id = `floatingCookieNum${this.index}`;
        this.element.className = 'floatingCookie';
        this.element.textContent = "I'm floating";
        
        // 设置绝对定位，确保top样式生效
        this.element.style.position = 'absolute';
        this.element.style.top = `${Math.round(Math.random() * 500)}px`;
        
        // 插入到body中，不影响已有元素
        document.body.appendChild(this.element);
        
        setTimeout(this.moveCookie, 500);
        setTimeout(this.deleteCookie, 1000);
    };
    moveCookie = () => {
        this.element.style.top = "50px";
    };
    deleteCookie = () => {
        console.log(this.element);
        this.element.remove();
    };
}

function clickedCookie() {
    maxIndex++;
    let c = new Cookie(maxIndex);
    c.addToScreen();
}

// 测试快速调用场景
setInterval(clickedCookie, 100);

关键优化点 #

• 使用document.createElement创建元素、appendChild插入DOM，完全不会干扰已存在的元素，每个Cookie实例的this.element始终指向页面上的真实活跃节点。
• 显式添加position: absolute，确保top样式生效（原代码可能依赖外部CSS，这里显式声明更稳妥）。
• 用element.remove()替代parentElement.removeChild，语法更简洁且兼容性良好。

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