[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.

This question is related to twitter-bootstrap modal-dialog

The answer is


if is bootstrap 3 you can use:

$("#mimodal").on('hidden.bs.modal', function () {
    $(this).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.


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

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.


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


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

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

bootstrap 3 + jquery 2.0.3:

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

This is my solution:

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


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.


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

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

});

Also works on bootstrap 4.x

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

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

//Just add .remove(); 
//Bootstrap v3.0.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.


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.


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

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

Single line complete removal on hide ( ES6 )

$("#myModal").on('hidden.bs.modal', (e)=>e.currentTarget.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


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

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


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

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

Questions with twitter-bootstrap tag:

Bootstrap 4: responsive sidebar menu to top navbar CSS class for pointer cursor How to install popper.js with Bootstrap 4? Change arrow colors in Bootstraps carousel Search input with an icon Bootstrap 4 bootstrap 4 responsive utilities visible / hidden xs sm lg not working bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js Bootstrap 4 - Inline List? Bootstrap 4, how to make a col have a height of 100%? Bootstrap 4: Multilevel Dropdown Inside Navigation Align the form to the center in Bootstrap 4 Customize Bootstrap checkboxes Angular 4: How to include Bootstrap? bootstrap 4 row height Bootstrap 4 File Input How can I center an image in Bootstrap? Bootstrap 4 Change Hamburger Toggler Color How can I make Bootstrap 4 columns all the same height? Center the content inside a column in Bootstrap 4 col align right How to hide collapsible Bootstrap 4 navbar on click Bootstrap 4 Center Vertical and Horizontal Alignment Vertical Align Center in Bootstrap 4 How to implement a Navbar Dropdown Hover in Bootstrap v4? `col-xs-*` not working in Bootstrap 4 Using media breakpoints in Bootstrap 4-alpha Bootstrap 4, How do I center-align a button? What is class="mb-0" in Bootstrap 4? Bootstrap 4 align navbar items to the right Bootstrap fullscreen layout with 100% height Bootstrap 4 img-circle class not working Bootstrap footer at the bottom of the page How to create a fixed sidebar layout with Bootstrap 4? How to include bootstrap css and js in reactjs app? Bootstrap date time picker How to change the bootstrap primary color? What is the '.well' equivalent class in Bootstrap 4 Bootstrap col-md-offset-* not working $(...).datepicker is not a function - JQuery - Bootstrap Failed to load resource 404 (Not Found) - file location error? Table column sizing How to add bootstrap to an angular-cli project How to get images in Bootstrap's card to be the same height/width? Stretch image to fit full container width bootstrap Bootstrap 4 card-deck with number of columns based on viewport Removing padding gutter from grid columns in Bootstrap 4 How to use Bootstrap in an Angular project? How to put a link on a button with bootstrap? Bootstrap get div to align in the center How to make Bootstrap 4 cards the same height in card-columns? Read input from a JOptionPane.showInputDialog box Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+) How can I display a modal dialog in Redux that performs asynchronous actions? Angular 2.0 and Modal Dialog How to use Bootstrap modal using the anchor tag for Register? Bootstrap modal opening on page load Trying to make bootstrap modal wider How to present a modal atop the current view in Swift Send parameter to Bootstrap modal window? Set bootstrap modal body height by percentage Bootstrap Modal before form Submit Disable click outside of bootstrap modal area to close modal Bootstrap Modal sitting behind backdrop Display Bootstrap Modal using javascript onClick Bootstrap 3 - How to load content in modal body via AJAX? Closing Bootstrap modal onclick Bootstrap: Open Another Modal in Modal How to check if bootstrap modal is open, so I can use jquery validate? Multiple modals overlay bootstrap jquery show.bs.modal event won't fire How to prevent background scrolling when Bootstrap 3 modal open on mobile browsers? Auto-click button element on page load using jQuery Bootstrap 3 modal vertical position center Bootstrap 3 with remote Modal Calling a function on bootstrap modal open Close Bootstrap Modal Invoking modal window in AngularJS Bootstrap UI using JavaScript Twitter Bootstrap Modal Form Submit Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape? Bootstrap modal not displaying Open Bootstrap Modal from code-behind Load content with ajax in bootstrap modal How to add an event after close the modal window? How to deal with ModalDialog using selenium webdriver? Bootstrap Modal immediately disappearing how to destroy bootstrap modal window completely? make bootstrap twitter dialog modal draggable How to hide Bootstrap previous modal when you opening new one? How to handle the modal closing event in Twitter Bootstrap? Twitter bootstrap remote modal shows same content every time How to set the focus for a particular field in a Bootstrap modal, once it appears Twitter Bootstrap: Print content of modal window Twitter bootstrap modal-backdrop doesn't disappear Using Bootstrap Modal window as PartialView jQuery dialog popup Bootstrap modal appearing under background Can not get a simple bootstrap modal to work How to get twitter bootstrap modal to close (after initial launch) How to hide Bootstrap modal with javascript? How to pass values arguments to modal.show() function in Bootstrap