How to dispose(destroy) bootstrap 5 modal

user_14329680 0
Viewed 1447

I am using bootstrap 5 in a project. I am building a quiz that opens when you click a button. The quiz is shown inside a bootstrap 5 modal component.

My problem is, when you click the close button of the modal and then re-launch it the data from previous quiz round is still there (radio buttons are still checked). I want the close button to destroy the modal and dispose of all previous data. I have tried several methods (separately), as mentioned below:

myModal.dispose()
myModal.modal("dispose")
bootstrap.Modal.dispose();
bootstrap.Modal(bootstrap.modal.getInstance(quiz-modal)).dispose

Bootstrap 5 has a class called Modal and in it there is a dispose method, but I am not able to use it.

The name of modal is myModal and it is a bootstrap 5 modal. the quiz-modal is reference to html element which is shown as modal.

bootstrap-modal modal-dialog javascript
1 Answers

I have found a solution that seems to work.

quizClose.addEventListener("click", () => {
  //reset the forms containing quiz questions
  for (let i = 0; i < totalQuestions.length; i++) {
    totalQuestions[i].reset();
  }
  let myModal = bootstrap.Modal.getInstance(
    document.querySelector(".quiz-modal")
  );
  //remove static backdrop
  myModal.setAttribute("data-bs-backdrop", "false");
  //destroy modal
  myModal.dispose();
});
user_143296800
Related