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

问：

这是我的第一篇文章，我对 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!");
    }