How to remove elements from div quiz button jquery

Question

I Work with quiz, and for this i create few 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:

 <h2></h2>

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

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

So, problem is: i want to generate button for answers dynamically, for this i use for each. But if i go to the next question, it's not remove previus, for this i try to use:

$(".submit-answer").remove();

It's works but only one time, after answer to the question script stoped.

Answer 1

The issue that you are creating the button dynamically and before that the click event has been attached on page load. So, the click event will not attach to the dynamically added button.

You are doing like

$('.submit-answer').on('click', function(){});

You should use

$(document).on('click', '.submit-answer', function(){});

To capture events on elements that are created AFTER declaring your event listeners - you should bind to a parent element or element higher in the hierarchy.