Javascript 如何从div测验按钮jquery中删除元素

Javascript 如何从div测验按钮jquery中删除元素,javascript,jquery,Javascript,Jquery,我使用测验,为此我创建了一些函数 $(document).ready(function () { start(questionNumber); $(".submit-answer").on("click", function (event) { var userAnswer = parseInt($(this).attr("id")); answerCheck(userAnswer); setTimeout(function

我使用测验,为此我创建了一些函数

$(document).ready(function () {
    start(questionNumber);

    $(".submit-answer").on("click", function (event) {

        var userAnswer = parseInt($(this).attr("id"));
        answerCheck(userAnswer);

        setTimeout(function () {
            $(".submit-answer").remove();
            $(".submit-answer").removeClass("correctStyle incorrectStyle");
            start(questionNumber);
        }, 1500)

        questionNumber++;
    });

});

var questionNumber = 0,
    totalCorrect = 0,
    optionFinal = 0;

var allQuestions = [
    {
        question: 'Test question',
        choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4", "Answer 5", "Answer 6"],
        answer: 0
    }, {
        question: 'Test question',
        choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4"],
        answer: 0
    },
    {
        question: 'Test question',
        choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4", "Answer 5"],
        answer: 0
    },
    {
        question: 'Test question',
        choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4", "Answer 5", "Answer 6"],
        answer: 0
    }
];

// continue with next question or end
var start = function (questionNumber) {
    $('h2').hide().fadeIn(400);

    if (questionNumber !== allQuestions.length) {
        question(questionNumber);
    } else {
        end();
    }
};

// show question and possible answers
function question(questionNum) {
    $("h2").text(allQuestions[questionNum].question);

    $.each(allQuestions[questionNum].choices, function (i, answers) {
        var buttons = `<button class="submit-answer" id="${i}"></button>`;
        $(".buttons-creation").append(buttons);
        $("#" + i).html(answers);
    });
};

function end() {
    $(".buttons-creation").hide();
    $("h2").text("You scored " + totalCorrect + " out of " + allQuestions.length);
    $("#try-again-container").show();
    restart();
};

function restart() {

    $("#try-again").click(function () {
        questionNumber = 0,
            totalCorrect = 0,
            optionFinal = 0;

        start(questionNumber);
        $("#try-again-container").hide();
        $(".buttons-creation").show();
    });
}

function answerCheck(userAnswer) {
    var correctAnswer = allQuestions[questionNumber].answer;

    if (userAnswer === correctAnswer) {
        $("#" + userAnswer).addClass("correctStyle");
        totalCorrect++;
    } else {
        $("#" + userAnswer).addClass("incorrectStyle");
    }
};
HTML:

所以,问题是:我想动态地为答案生成一个按钮,为此,我为每个答案使用这个按钮。但如果我进入下一个问题,它不是移除previus,因为我尝试使用:

$.submit-answer.remove


它可以工作,但只有一次,在问题脚本的答案停止后。

动态创建按钮的问题,在此之前,单击事件已附加到页面加载上。因此,单击事件将不会附加到动态添加的按钮

你在做什么

$'.submit answer'。单击,函数{}

你应该使用

$document.on'click','submit answer',函数{}

要捕获在声明事件侦听器后创建的元素上的事件,应绑定到父元素或层次结构中更高的元素

 <h2></h2>

    <div id="try-again-container" style="display:none;"><button id="try-again">Try Again</button></div>

    <div class="buttons-creation">
    </div>