无法从DOM移除GIF/IMG元素？Quiz应用Logo移除问题求助

问题根源分析 #

你的代码里有几个关键错误导致Logo无法移除：

• 类名大小写不匹配：你用document.getElementsByClassName("Container")获取容器，但HTML里的容器类是小写的container，导致获取不到元素，调用.remove()时触发"not a function"错误。
• 多余的数组包装：logoLoop = [document.getElementsByClassName("Logo")]把HTMLCollection额外套了一层数组，不仅没必要，还会导致后续操作元素时出错。
• 操作对象错误：你想要移除的是Logo图片，但代码里却遍历容器尝试移除，完全偏离了目标。

修正后的代码方案 #

JavaScript部分

const startButton = document.getElementById("start");
const allButtons = document.querySelectorAll('.button-56');
const buttonGrid = document.getElementsByClassName("grid");
// 直接获取Logo元素集合，去掉多余的数组包装
const logos = document.getElementsByClassName("Logo");
// 修正类名大小写，匹配HTML里的container
const containers = document.getElementsByClassName("container");

addGlobalEventListener("click", ".button-56", e => {
  startGame();
})

function addGlobalEventListener(type, selector, callback) {
  document.addEventListener(type, e => {
    if (e.target.matches(selector)) callback(e)
  })
}

function startGame() {
  // 移除按钮网格
  [...buttonGrid].forEach(grid => grid.remove());
  // 遍历移除所有Logo（页面只有一个的话也可以直接单个移除）
  [...logos].forEach(logo => logo.remove());
}

更高效的单个元素移除方式

如果页面里只有一个Logo，不需要遍历集合，直接定位移除更简洁：

function startGame() {
  [...buttonGrid].forEach(grid => grid.remove());
  // 用querySelector获取单个元素，可选链避免元素不存在时报错
  document.querySelector(".Logo")?.remove();
}

关于.removeChild()的正确用法 #

如果你想用.removeChild()，需要通过父元素调用，传入要移除的子元素：

const logo = document.querySelector(".Logo");
if (logo) {
  logo.parentNode.removeChild(logo);
}

不过现在浏览器普遍支持元素自身的.remove()方法，写法更简洁，推荐使用。

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