how to destroy bootstrap modal window completely?

Question

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.

Are you using jQuery or something similar? Might be able to do `$(modal_selector).remove()`. — robbrit, Nov 01 '12 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 01 '12 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 01 '12 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 01 '12 at 14:49
I do this by having a web service in the background feed me the HTML on demand using jquery/json, then you could simply remove the HTML once you are done with it. This would allow you to do it without refreshing the page. — eandersson, Nov 11 '12 at 14:24
There are a few different approaches here. I would like to point out two things that are important for Bootstrap V3. Firstly, if you are using $(this).data('modal',null), you need to replace 'modal' with 'bs.modal'. Secondly, I could not get it to trigger with the hidden event, but it worked fine with the hide event. — DatsunBing, Sep 11 '13 at 07:04
Why is anything Javascript with Bootstrap such a royal pain. — Oliver Weichhold, Jun 02 '14 at 13:35
Use jquery's .clone(), load() and replaceWith() to save and restore the dialog html data — ejectamenta, Jan 27 '23 at 15:11

score 127 · Accepted Answer · answered Aug 11 '13 at 07:20

127

if is bootstrap 3 you can use:

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

answered Aug 11 '13 at 07:20

user2612497

1,354
2
9
3

This was exactly the piece of magic I needed without digging into the bootstrap core code. Thank you! – wlashell Aug 29 '13 at 06:24
8

As every other answers, this does not seems to remove the backdrop. – htulipe Nov 04 '13 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. – drillingman Jun 05 '14 at 21:22
4

@drillingman: +1 that worked for me: `$("#mimodal").removeClass('fade').modal('hide')` – John Gietzen Jun 16 '14 at 05:11
5

The only thing in BS3 that worked for me was: `$(this).html("");` – Ryan Currah Jul 24 '14 at 20:44
did nothing, the dialog was there in the DOM as it is, only hidden. I'm using bootstrap 3.2.0 – coding_idiot Mar 29 '15 at 09:31
Doesn't remove event handlers etc, so specifically fails to answer the question for BS 3 at least. Removing the HTML doesn't cut it either - that's *not* the modal and may well contain HTML you need. – philw Aug 26 '15 at 09:45
if I'm not using JQuery, how do I do this? – Uriel Arvizu Apr 29 '16 at 16:25
@UrielArvizu Bootstrap JS requires JQuery so if you're using this modal you have JQuery available – sync May 06 '16 at 02:38
@sync AngularJS, as far as I know, uses a super lightweight version of JQuery if no reference for it is included into the project, honestly I'm not a big fan of JQuery so for AngularJS to acknowledge people like me is great, they only include a small percent of JQuery functions, the rest is pure JS. – Uriel Arvizu May 06 '16 at 15:39
Be careful, if you delete only data, events remain associated with the old modal, I advise you to delete it entirely and recreate from the HTML. – Loenix Oct 25 '16 at 09:03
1

How exactly do you delete it entirely? @Loenix – AlexioVay Nov 09 '16 at 19:13
1

The only thing that worked for me was using `$(this).remove();` instead of `$(this).data('bs.modal', null);` and then adding after the function `$('#myModal').modal('hide');` my fiddle https://jsfiddle.net/41t5vf1p/ – Cesar Bielich Oct 12 '17 at 05:10
This worked for me $(this).find(".modal-body").html(""); Because I want to use modal again but with another content and $(this).html("") destroyed everything and new modal didn't shown! – Omid.Hanjani Jul 10 '18 at 12:00
doesn't work for me. the only thing remotely working is Vatsal's answer here: https://stackoverflow.com/a/51947610/3907258 – EvilSmurf Aug 12 '20 at 08:28

score 41 · Answer 2 · edited May 23 '17 at 12:02

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.

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 '13 at 20:31
If you use Bootstrap 3, you must listen to the `hidden.bs.modal` instead of the `hidden` event. http://getbootstrap.com/javascript/#modals — Romain Paulus, Oct 19 '13 at 00:37

score 20 · Answer 3 · edited Feb 02 '15 at 20:29

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

edited Feb 02 '15 at 20:29

Buhake Sindi

87,898
29
167
228

answered Oct 27 '13 at 11:28

zelibobla

1,498
1
16
23

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 '15 at 10:50
Yep, you're right. This was written for 2.x version. Updated. – zelibobla Jan 29 '15 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(); – alphapilgrim Nov 18 '15 at 19:51

score 15 · Answer 4 · edited Aug 02 '23 at 11:45

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.

edited Aug 02 '23 at 11:45

Sayed Abolfazl Fatemi

3,678
3
36
48

answered Dec 19 '12 at 07:50

Arjun

815
1
8
18

.remove() removes it completely . And .show() doesnt work any more . What do I do initialize it again ? – geeky_monster Mar 23 '13 at 01:21
Since creating bootstrap modal make changes to `body` suggested solution will not roll back all changes. – zelibobla Oct 27 '13 at 11:21
2

This won't work, because the backdrop will be stuck, why did it even get upvoted? – codenamezero Sep 02 '14 at 15:40

score 9 · Answer 5 · answered May 15 '18 at 07:41

9

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

answered May 15 '18 at 07:41

طلحة

375
4
8

This leaves a gray backdrop as well leaving the web page unusable!! – Biju Feb 25 '20 at 07: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 '21 at 09:22

score 4 · Answer 6 · answered Nov 12 '12 at 00:35

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

answered Nov 12 '12 at 00:35

John In't Hout

304
1
10

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 '23 at 04:00

score 4 · Answer 7 · edited Dec 21 '18 at 09:55

4

Also works on bootstrap 4.x

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

edited Dec 21 '18 at 09:55

Suraj Rao

29,388
11
94
103

answered Aug 10 '18 at 13:50

Cristian Ghirba

69
2

This disposes the modal but leaves a gray backdrop which makes the web page unusable – Biju Feb 25 '20 at 06:52
In which bootstrap version did you try it? – Cristian Ghirba Mar 02 '20 at 09:34

score 3 · Answer 8 · edited Sep 25 '13 at 03:24

3

bootstrap 3 + jquery 2.0.3:

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

edited Sep 25 '13 at 03:24

Radim Köhler

122,561
47
239
335

answered Sep 25 '13 at 03:07

user2813480

39
1

1

Since creating bootstrap modal make changes to `body` suggested solution will not roll back all changes. – zelibobla Oct 27 '13 at 11:24

score 3 · Answer 9 · edited Feb 21 '17 at 08:17

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

edited Feb 21 '17 at 08:17

Hakan Fıstık

16,800
14
110
131

answered Sep 09 '14 at 08:17

Saeid

483
5
14

score 2 · Answer 10 · answered Nov 05 '12 at 21:37

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.

score 2 · Answer 11 · answered Nov 09 '12 at 22:47

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

score 2 · Answer 12 · answered Jun 16 '17 at 12:31

2

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

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

answered Jun 16 '17 at 12:31

Luca Di Lenardo

21
3

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. – Sebastian Lenartowicz Jun 17 '17 at 13:59
Ok. I was in a hurry... anyway add ".remove();" for remove all reference and html code of your bootstrap modal. – Luca Di Lenardo Jun 20 '17 at 13:19

score 2 · Answer 13 · answered Jul 18 '17 at 15:58

2

This is my solution:

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

answered Jul 18 '17 at 15:58

Daniel Ortegón

315
2
8

score 2 · Answer 14 · answered Oct 22 '17 at 19:14

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

});

answered Oct 22 '17 at 19:14

Alin Razvan

1,451
13
18

After this, can the modal re-initialized? – rahim.nagori May 04 '20 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. – Alin Razvan May 04 '20 at 22:55

score 1 · Answer 15 · answered Aug 30 '16 at 21:10

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

score 1 · Answer 16 · answered Oct 13 '21 at 10:55

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

score 0 · Answer 17 · answered Feb 12 '13 at 15:27

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

answered Feb 12 '13 at 15:27

Akshay

3,558
4
43
77

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(); } });` – Thomas Bennett Jun 04 '15 at 21:44

score 0 · Answer 18 · answered Oct 31 '13 at 05:26

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.

answered Oct 31 '13 at 05:26

guy_fawkes

947
8
31

score 0 · Answer 19 · edited Feb 21 '17 at 08:18

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

edited Feb 21 '17 at 08:18

Hakan Fıstık

16,800
14
110
131

answered May 14 '15 at 21:29

Amir

8,821
7
44
48

This leaves a gray backdrop as well leaving the web page unusable!! – Biju Feb 25 '20 at 07:10

score 0 · Answer 20 · answered Sep 01 '15 at 18:21

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.

answered Sep 01 '15 at 18:21

Rob Y

214
1
9

score 0 · Answer 21 · answered Jan 15 '17 at 16:13

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

answered Jan 15 '17 at 16:13

Maksym Kalin

1,693
16
18

score 0 · Answer 22 · answered Feb 21 '18 at 21:35

0

Single line complete removal on hide ( ES6 )

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

answered Feb 21 '18 at 21:35

Dieter Gribnitz

5,062
2
41
38

Bill Milagro · Answer 23 · 2018-03-07T05:46:43.137

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

edited Mar 07 '18 at 05:46

answered Mar 06 '18 at 03:27

Bill Milagro

131
1
6

score 0 · Answer 24 · answered Jul 19 '18 at 03:22

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.

answered Jul 19 '18 at 03:22

d.i.joe

606
9
22

1

This leaves a gray backdrop as well leaving the web page unusable!! – Biju Feb 25 '20 at 06:59

score 0 · Answer 25 · edited Apr 26 '23 at 07:59

0

This is my solution:

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

edited Apr 26 '23 at 07:59

olibiaz

2,551
4
29
31

answered Apr 25 '23 at 16:07

Thamri Meher

1
2

score -4 · Answer 26 · edited Oct 20 '16 at 08:13

-4

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

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

edited Oct 20 '16 at 08:13

Mohammad

21,175
15
55
84

answered Oct 19 '16 at 16:34

Samson Iyanda

512
3
13

Downvoted because it just hides the modal what clearly wasn't asked. – AlexioVay Nov 09 '16 at 19:15

how to destroy bootstrap modal window completely?

26 Answers26

#pickoptionmodal is the id of my modal window.

Linked