如何用原生JavaScript移除答题按钮并重建以加载新题目选项？

问题描述 #

作为JavaScript新手，在完成选择题测验作业时，遇到答对题目后旧按钮不消失、新按钮直接叠加在下方的问题。尝试过remove方法，但通过ID删除会移除整个容器，用getElementsByClassName时出错，需要原生JavaScript解决方案。

问题根源 #

1. 每次渲染新题目时，未清除容器内的旧按钮，直接append导致按钮叠加。
2. 使用document.querySelectorAll("button").remove()无效：querySelectorAll返回的是NodeList集合，没有直接的remove方法，且会选中页面所有按钮，容易误删其他元素。
3. 原循环中的i未用let声明，会成为全局变量，可能引发逻辑问题。

解决方案 #

修改代码，在渲染新题目前先清空按钮容器，同时修复循环变量的声明问题：

修改后的完整代码

function renderQuestion() {
    var newQuestion = document.getElementById("question");
    var newAnswers = document.getElementById("answerBtns");
    // 清空容器内的旧按钮
    newAnswers.innerHTML = '';
    
    newQuestion.textContent = questions[currentQuestion].question;
    // 用let声明循环变量i，避免全局变量污染
    for (let i = 0; i < questions[currentQuestion].answers.length; i++){
        let btnEl = document.createElement('button');
        btnEl.setAttribute("class", "btn btn-success bg-gradient btn-lg");
        btnEl.setAttribute("value", questions[currentQuestion].answers[i]);
        btnEl.textContent = questions[currentQuestion].answers[i];
        newAnswers.append(btnEl);
        btnEl.addEventListener("click", answerCheck);
    }
};

// 检查答案的函数
function answerCheck(btnEl) {
    if (questions[currentQuestion].correct == btnEl.target.textContent) {
        score += 1;
        console.log("Correct! You got this! Your score is " + score);
        currentQuestion++
        // 调用渲染函数，此时会自动清空旧按钮
        renderQuestion();
    } else {
        secondsLeft -= 5;
        console.log("Wrong :( Try again!");
    }
}

关键修改点说明 #

• newAnswers.innerHTML = ''：直接清空按钮容器的所有子元素，简单高效，不会误删容器本身。
• 循环变量i改用let声明：限制i的作用域在循环内部，避免全局变量引发的意外问题。
• 移除answerCheck中错误的按钮删除代码：交由renderQuestion统一处理清空逻辑，代码更简洁。

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