My approach would be to use the clone() method of jQuery. It creates a copy of your element, and that's what you want : a copy of your first unaltered modal, that you can replace at your wish : Demo (jsfiddle)

var myBackup = $('#myModal').clone();


// Delegated events because we make a copy, and the copied button does not exist onDomReady
$('body').on('click','#myReset',function() {
$('#myModal').modal('hide').remove();
var myClone = myBackup.clone();
$('body').append(myClone);
});

The markup I used is the most basic, so you just need to bind on the right elements / events, and you should have your wizard reset.

Be careful to bind with delegated events, or rebind at each reset the inner elements of your modal so that each new modal behave the same way.

From what i understand, you don't wanna remove it, nor hide it ? Because you might wanna reuse it later ..but don't want it to have the old content if ever you open it up again ?

<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>

If you wanna use it as a dynamic template just do something like

$(selector).modal({show: true})


....


$(selector).modal({show: false})
$(".modal-body").empty()


....


$(".modal-body").append("new stuff & text")
$(selector).modal({show: true})

The power of jQuery. $(selector).modal('hide').destroy(); will first remove sinds you might have the sliding affect and then removes the element completely, however if you want the user to be able to open the modal again after you finished the steps. you might just wanna update only the settings you wanna have reseted so for reseting all the inputs in your modal this would look like the following:

$(selector).find('input, textarea').each(function(){
$(this).val('');
});

NOTE: This solution works only for Bootstrap before version 3. For a Bootstrap 3 answer, refer to this one by user2612497.

What you want to do is:

$('#modalElement').on('hidden', function(){
$(this).data('modal', null);
});

that will cause the modal to initialize itself every time it is shown. So if you are using remote content to load into the div or whatever, it will re-do it everytime it is opened. You are merely destroying the modal instance after each time it is hidden.

Or whenever you want to trigger the destroying of the element (in case it is not actually every time you hide it) you just have to call the middle line:

$('#modalElement').data('modal', null);

Twitter bootstrap looks for its instance to be located in the data attribute, if an instance exists it just toggles it, if an instance doesn't exist it will create a new one.

Hope that helps.

You can completely destroy a modal without page reloading by this way.

$("#modal").remove();
$('.modal-backdrop').remove();

but it will completely remove modal from your html page. After this modal hide show will not work.

If modal shadow remains darker and not going for showing more than one modal then this will be helpful

$('.modal').live('hide',function(){
if($('.modal-backdrop').length>1){
$('.modal-backdrop')[0].remove();
}
});

if is bootstrap 3 you can use:

$("#mimodal").on('hidden.bs.modal', function () {
$(this).data('bs.modal', null);
});

bootstrap 3 + jquery 2.0.3:

$('#myModal').on('hide.bs.modal', function () {
$('#myModal').removeData();
})

For 3.x version

$( '.modal' ).modal( 'hide' ).data( 'bs.modal', null );

For 2.x version (risky; read comments below) When you create bootstrap modal three elements on your page being changed. So if you want to completely rollback all changes, you have to do it manually for each of it.

$( '.modal' ).remove();
$( '.modal-backdrop' ).remove();
$( 'body' ).removeClass( "modal-open" );

I had to use same modal for different link clicks. I just replaced the html content with empty "" of the modal in hidden callback.

If you have an iframe in your modal, you can remove its content by the following code:

$('#myModal').on('hidden.bs.modal', function(){
$(this).find('iframe').html("");
$(this).find('iframe').attr("src", "");
});

only this worked for me

$('body').on('hidden.bs.modal', '.modal', function() {
$('selector').val('');
});

It is safe forcing selectors to make them blank since bootstrap and jquery version may be the reason of this problem

This worked for me.

$('.modal-backdrop').removeClass('in');
$('#myDiv').removeClass('in');

The dialog and backdrop went away, but they came back the next time I clicked the button.

I had a same scenario where I would open a new modal on a button click. Once done, I want to completely remove it from my page... I use remove to delete the modal.. On button click I would check if modal exists , and if true I would destroy it and create a new modal ..

$("#wizard").click(function() {
/* find if wizard is already open */
if($('.wizard-modal').length) {
$('.wizard-modal').remove();
}
});

I don't know how this may sound but this work for me...........

$("#YourModalID").modal('hide');

It works for Bootstrap v3.3.6

$('#dialog').modal()
.on('hide.bs.modal', function () {
// Some Code
}).on('shown.bs.modal', function () {
// Some Code
}).on('hidden.bs.modal', function () {
$("#dialog").off();
});

$('#myModal').on('hidden.bs.modal', function () {
$(this).data('bs.modal', null).remove();
});


//Just add .remove();
//Bootstrap v3.0.3

This is my solution:

this.$el.modal().off();

This completely removes the modal from the DOM , is working for the "appended" modals as well .

#pickoptionmodal is the id of my modal window.

$(document).on('hidden.bs.modal','#pickoptionmodal',function(e){


e.preventDefault();


$("#pickoptionmodal").remove();


});

Single line complete removal on hide ( ES6 )

$("#myModal").on('hidden.bs.modal', (e)=>e.currentTarget.remove());

With ui-router this may be an option for you. It reloads the controller on close so reinitializes the modal contents before it fires next time.

$("#myModalId").on('hidden.bs.modal', function () {
$state.reload();  //resets the modal
});

I have tried accepted answer but it isn't seems working on my end and I don't know how the accepted answer suppose to work.

$('#modalId').on('hidden.bs.modal', function () {
$(this).remove();
})

This is working perfectly fine on my side. BS Version > 3

I have to destroy the modal right after it is closed through a button click, and so I came up with the following.

$("#closeModal").click(function() {
$("#modal").modal('hide').on('hidden.bs.modal', function () {
$("#modal").remove();
});
});

Note that this works with Bootstrap 3.

Also works on bootstrap 4.x

$('#modal_ID').modal( 'hide' ).data( 'bs.modal', null );

this worked for me on BS4:

let $modal = $(this);
$modal.modal('hide').on("hidden.bs.modal", function (){
$modal.remove();
});

we remove the modal after it is completely hidden. from BS doc:

hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).