[twitter-bootstrap] how to destroy bootstrap modal window completely?

I've made use of modal window for a wizard implementation which has around 4,5 steps. I need to destroy it completely after the last step(onFinish) and OnCancel step without having a page refresh. I can of course hide it, but hiding modal windows restores everything as such when i open up it again. Could anyone help me on this issue?

Thanks Any hints answers are helpful for me.

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", "");
});

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.

Single line complete removal on hide ( ES6 )

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

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

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();

});

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

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

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" );

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

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

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();
    }
});

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
});

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('');
});

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})

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.

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();
});

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 don't know how this may sound but this work for me...........

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

bootstrap 3 + jquery 2.0.3:

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

Also works on bootstrap 4.x

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

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.

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();
    }
});

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.

This is my solution:

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