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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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 gt 1               modal-backdrop   0  remove

User · Answer

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

User · Answer

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

User · Answer

bootstrap 3   jquery 2 0 3       myModal   on  hide bs modal   function             myModal   removeData

User · Answer

myModal   on  hidden bs modal   function              this  data  bs modal   null  remove           Just add  remove       Bootstrap v3 0 3

User · Answer

I don t know how this may sound but this work for me                 YourModalID   modal  hide

User · Answer

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

User · Answer

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

User · Answer

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     lt div class  modal hide fade  gt       lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times lt  button gt           lt h3 gt Modal header lt  h3 gt       lt  div gt       lt div class  modal-body  gt           lt p gt One fine body    lt  p gt       lt  div gt       lt div class  modal-footer  gt           lt a href     class  btn  gt Close lt  a gt           lt a href     class  btn btn-primary  gt Save changes lt  a gt       lt  div gt   lt  div gt    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  amp  text     selector  modal  show  true

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

This is my solution   this  el modal   off

User · Answer

Single line complete removal on hide   ES6         myModal   on  hidden bs modal    e   gt e currentTarget remove

User · Answer

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

User · Answer

Also works on bootstrap 4 x      modal ID   modal   hide    data   bs modal   null

User · Answer

if is bootstrap 3 you can use       mimodal   on  hidden bs modal   function            this  data  bs modal   null

User · Answer

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

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

Examples related to twitter-bootstrap

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

Examples related to twitter-bootstrap

Examples related to modal-dialog