有没有办法删除按钮，然后重新创建它以使用 JavaScript 生成不同的文本？

Question

这是我的第一篇文章，我对 JavaScript 还很陌生。对于作业，我需要创建一个包含多个问题的多项选择测验。我的代码从对象数组中提取并创建具有四个答案选项的按钮。我的问题（无论如何都是其中之一）是，在正确回答后，按钮不会消失，而是该功能在其下方添加了更多按钮。我希望删除创建的按钮，以便在正确回答问题后将其替换为下一系列按钮。我尝试了 .remove 方法，但唯一的方法是通过 div ID 删除所有内容，当我尝试 getElementsByClassName 时，我遇到了错误。这绝对是由于我的经验不足，但如果有人能帮助我解决这个问题，我将不胜感激。我需要使用普通 JS，请不要使用 jQuery。这就是我尝试实验后冲突的代码现在的样子。如果我需要提供更多信息，我可以。谢谢！

function renderQuestion() {
    var newQuestion = document.getElementById("question");
    var newAnswers = document.getElementById("answerBtns");
        newQuestion.textContent = questions[currentQuestion].question;
        for (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 to check chosen answer with answer in data

function answerCheck(btnEl) {
    // var btnEl = document.getElementsByClassName(".btn")
    if (questions[currentQuestion].correct == btnEl.target.textContent) {
        score += 1;
        console.log("Correct! You got this! Your score is " + score);
        let element = document.querySelectorAll("button");
        element.remove()
        currentQuestion++
        renderQuestion();
    } else {
        secondsLeft -= 5;
        console.log("Wrong :( Try again!");
    }

Answer 1

checkAnswer()

函数返回所有

<button>

元素的列表，然后尝试删除list。但是

.remove()

应该在 单个 elements 上调用。您可以循环遍历列表并在每个项目上调用

.remove()

，或者使用 @barbar 的第二个建议来清空包装答案的 div。

另外，友情提示：

.querySelectorAll()

的参数的行为与CSS完全相同，因此通过传递它

"button"

，您将获得整个页面上所有

<button>

元素的列表。如果除了答案之外还有其他按钮，可能会出现问题。