92

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.

9
  • 2
    Are you using jQuery or something similar? Might be able to do $(modal_selector).remove().
    – robbrit
    Nov 1, 2012 at 13:21
  • thanks it works but it when we rev=invoke doesnt get invoked by modal.show()..then how to reinvoke it?
    – Akki
    Nov 1, 2012 at 13:28
  • Yeah remove will really delete the modal, so it isn't openable again. Twitter Bootstrap's modal windows aren't really anything magical, so when you reopen a modal dialog you have to reset all the form elements manually (that's been my experience).
    – robbrit
    Nov 1, 2012 at 14:06
  • It depends on what you're displaying in the modal. Twitter Bootstrap only handles the displaying of the modal, whatever is in it is your responsibility.
    – robbrit
    Nov 1, 2012 at 14:49
  • Sir I am asking that how invoke, close and reinvoke Modal
    – Akki
    Nov 1, 2012 at 15:15

26 Answers 26

127

if is bootstrap 3 you can use:

$("#mimodal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null);
});
15
  • 8
    As every other answers, this does not seems to remove the backdrop.
    – htulipe
    Nov 4, 2013 at 13:58
  • 1
    @htulipe The approach is right but it will not work with transition effects on the modal. You'll need to remove .fade class from modal to get it work. Jun 5, 2014 at 21:22
  • 4
    @drillingman: +1 that worked for me: $("#mimodal").removeClass('fade').modal('hide') Jun 16, 2014 at 5:11
  • 5
    The only thing in BS3 that worked for me was: $(this).html(""); Jul 24, 2014 at 20:44
  • 1
    How exactly do you delete it entirely? @Loenix
    – AlexioVay
    Nov 9, 2016 at 19:13
41

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.

2
  • 5
    This actually does work however in a slightly different manner $("#modalElement").removeData("modal"); I am using Bootstrap 2.3.1 and jQuery 1.9.1
    – tlavarea
    May 18, 2013 at 20:31
  • 5
    If you use Bootstrap 3, you must listen to the hidden.bs.modal instead of the hidden event. getbootstrap.com/javascript/#modals Oct 19, 2013 at 0:37
20

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" );
3
  • Using manual steps is a risky approach, as the Bootstrap code might get changed and you might miss some aspects, then. For examply, at least in Bootstrap 3.2 style="padding-right: 17px;" will be set on the body as well to account for the hiding scrollbar. Bottom line: use Bootstraps API which in v3 would be $('.modal').modal('hide').data('bs.modal', null);.
    – Oliver
    Jan 29, 2015 at 10:50
  • Yep, you're right. This was written for 2.x version. Updated.
    – zelibobla
    Jan 29, 2015 at 14:52
  • if your dynamically injecting data to modal and you remove all of the second part of your answer it will strip much more than needed. Beyond the point of reusing modal. If it helps I suggest using your specific class.remove(); Nov 18, 2015 at 19:51
15

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

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

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

3
  • .remove() removes it completely . And .show() doesnt work any more . What do I do initialize it again ? Mar 23, 2013 at 1:21
  • Since creating bootstrap modal make changes to body suggested solution will not roll back all changes.
    – zelibobla
    Oct 27, 2013 at 11:21
  • 2
    This won't work, because the backdrop will be stuck, why did it even get upvoted? Sep 2, 2014 at 15:40
11

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

2
  • This leaves a gray backdrop as well leaving the web page unusable!!
    – Biju
    Feb 25, 2020 at 7:02
  • Works perfectly on BS4, and the backdrop gets automatically removed as well as it picks up to the modal remove event.
    – Ivan
    Jul 25, 2021 at 9:22
4

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('');
});
1
  • 1
    I'm not sure how this is an answer? question clearly is asking for removing bootstrap modal which neither text nor the example answers that!
    – AaA
    Mar 10 at 4:00
4

Also works on bootstrap 4.x

$('#modal_ID').modal( 'hide' ).data( 'bs.modal', null );
2
  • This disposes the modal but leaves a gray backdrop which makes the web page unusable
    – Biju
    Feb 25, 2020 at 6:52
  • In which bootstrap version did you try it? Mar 2, 2020 at 9:34
3

bootstrap 3 + jquery 2.0.3:

$('#myModal').on('hide.bs.modal', function () {
   $('#myModal').removeData();
})
1
  • 1
    Since creating bootstrap modal make changes to body suggested solution will not roll back all changes.
    – zelibobla
    Oct 27, 2013 at 11:24
3

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

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.

2

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})
2
$('#myModal').on('hidden.bs.modal', function () {
      $(this).data('bs.modal', null).remove();
});

//Just add .remove(); 
//Bootstrap v3.0.3
2
  • While this code may, in fact, be a solution to the problem, it is generally a good idea to include an explanation of what it does when you answer a question. Jun 17, 2017 at 13:59
  • Ok. I was in a hurry... anyway add ".remove();" for remove all reference and html code of your bootstrap modal. Jun 20, 2017 at 13:19
2

This is my solution:

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

2

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

});
2
  • After this, can the modal re-initialized? May 4, 2020 at 10:41
  • @rahim.nagori as it writes in the description is deleting the modal from the DOM , you can re-add it ... is not closing modal , is deleting him , the thread is about destroy modal window completely. May 4, 2020 at 22:55
1

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

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

0

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();
    }
});
1
  • 1
    Live is outdated, to be replaced with on and the [0] on the element you're targeting isn't necessary if you're using jQuery. Also, if you remove the backdrop entirely, note you may have to add it back...Try: $(document).on('hidden.bs.modal', '.modal', function(e) { if ($('.modal-backdrop').length) { $('.modal-backdrop').remove(); } }); Jun 4, 2015 at 21:44
0

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

0

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.

0

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

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

1
  • This leaves a gray backdrop as well leaving the web page unusable!!
    – Biju
    Feb 25, 2020 at 7:10
0

Single line complete removal on hide ( ES6 )

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

0

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

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.

1
  • 1
    This leaves a gray backdrop as well leaving the web page unusable!!
    – Biju
    Feb 25, 2020 at 6:59
0

This is my solution:

$('#myModal').on('hidden.bs.modal', function (e) {
  $(this).find('form')[0].reset();
});
-4

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

$("#YourModalID").modal('hide');
1
  • Downvoted because it just hides the modal what clearly wasn't asked.
    – AlexioVay
    Nov 9, 2016 at 19:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.