按钮removeEventListener失效求助：无法移除骰子点击事件

核心问题 #

你的代码里根本没给clear按钮绑定点击事件，反而在dice1的点击事件里执行了clearButton.removeEventListener("click", img)——这逻辑完全颠倒了，clear按钮从来没绑定过事件，自然点击没反应。另外还有两个隐性问题：

• ramdom变量没生成随机数，点击dice1也不会显示图片
• count变量未初始化，可能导致逻辑异常

修正后的代码 #

// 初始化变量
let count = 0;
const dice1 = document.getElementById('dice1');
const clearButton = document.getElementById('clear');

// 给dice1绑定点击事件
dice1.addEventListener("click", generateDiceImg);

// 生成骰子图片的函数
function generateDiceImg(){
    count++;
    if(count === 1) {
        // 生成1-6的随机数
        const random = Math.floor(Math.random() * 6) + 1;
        // 简化图片生成逻辑，避免冗余代码
        const img = document.createElement("img");
        img.src = `https://i.ibb.co/${['HPHsSHp/d1.jpg','ZXmCQxD/d2.jpg','Y0x8K65/d3.jpg','8gq6Rfx/d4.jpg','WyWjWT9/d5.jpg','zZrByy0/d6.jpg'][random-1]}`;
        img.classList.add("Upload");
        // 按原逻辑找到对应容器
        const container = document.getElementById(`img${random}`);
        container.appendChild(img);
        container.className = "position";
    }
}

// 给clear按钮绑定点击事件，实现清除逻辑
clearButton.addEventListener("click", () => {
    // 移除dice1的点击事件
    dice1.removeEventListener("click", generateDiceImg);
    // 删除所有生成的图片
    const allDiceImgs = document.querySelectorAll(".Upload");
    allDiceImgs.forEach(img => img.remove());
    // 重置count，方便后续重新点击生成
    count = 0;
    // 可选：重置容器类名
    for(let i=1; i<=6; i++){
        const container = document.getElementById(`img${i}`);
        if(container) container.className = "";
    }
});

关键修正点 #

• 给clear按钮主动绑定点击事件，在事件处理函数里完成「移除dice1事件+删除图片」的核心逻辑
• 补充了随机数生成逻辑，确保点击dice1能正常显示对应骰子图片
• 初始化了count变量，避免未定义报错
• 简化了图片生成的冗余代码，减少重复逻辑
• 统一通过.Upload类选择所有生成的图片，批量删除，不用逐个判断

内容的提问来源于stack exchange，提问作者Alex S.