JS: How to hide a bootstrap modal so that the input data doesn't persist?

Question

I have a modal I am including in my app and during the the checkout process, I show the modal. If the transaction fails, I hide the modal using $('#my-modal').modal('hide') but my issue is that when the user goes to enter the checkout process again and it shows the modal, it still has the data that was there before. Is it possible to destroy the instance so that the data doesn't persist that?

Answer 1

I would just reset the inner HTML of the fields by id to empty.

Edit: Code bellow document.getElementById("field").innerHTML = "";

Edit 2: There is already a Bootstrap event that gets called on hide

 $('#MyModal').on('hidden.bs.modal', function () {
     $(this).find('form').trigger('reset');
 })

Will reset all the fields if you have a form inside the modal in question.