Quiz项目遇Uncaught TypeError: allButtons.remove() is not a function错误

问题根源 #

1. 选择器语法错误：querySelectorAll('button-56')里的button-56是类名，类选择器必须以.开头，正确写法是querySelectorAll('.button-56')。
2. 集合无法直接调用remove()：querySelectorAll返回的是NodeList，getElementsByClassName返回的是HTMLCollection，这两者都是DOM元素集合，不是单个元素，不能直接调用remove()方法，必须遍历集合中的每个元素逐一删除。
3. 单个元素获取方式冗余：如果页面中只有一个logo元素，用querySelector('.Logo')直接获取单个元素比getElementsByClassName更简洁，无需处理集合。

修复后的代码 #

const startButton = document.getElementById("start");
const allButtons = document.querySelectorAll('.button-56');
const logoButton = document.querySelector(".Logo");

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

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

function startGame() {
  // 遍历所有按钮元素执行删除
  allButtons.forEach(button => button.remove());
  // 检查logo元素存在后执行删除
  if (logoButton) logoButton.remove();
}

说明 #

修改后点击Start按钮即可正确移除所有目标按钮和logo元素，为后续展示Quiz题目和输入组件腾出页面空间。另外，querySelectorAll返回的是静态集合，不会随DOM变化自动更新，更适合当前一次性获取元素并删除的场景。

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