How to completely remove a dialog on close

Question

When an ajax operation fails  I create a new div with the errors and then show it as a dialog  When the dialog is closed I would like to completely destroy and remove the div again  How can I do this  My code looks something like this at the moment       lt div gt We failed lt  div gt         dialog                title   Error           close  function event  ui                          this  destroy   remove                        When I run this the dialog box shows up correctly  but when I close it the dialog is still visible in the html  using FireBug   What am I missing here  Something I have forgotten   Update  Just noticed my code gives me an error in the firebug console        this  destroy is not a function   Anyone able to help me out   Update  If I do just   this  remove   instead  the item is removed from the html  But is it completely removed from the DOM  Or do I somehow need to call that destroy function first as well

User · Answer

I use this function in all my js projects

You call it: hideAndResetModals("#IdModalDialog")

You define if:

function hideAndResetModals(modalID)
{
    $(modalID).modal('hide');
    clearValidation(modalID); //You implement it if you need it. If not, you can remote this line
    $(modalID).on('hidden.bs.modal', function () 
    {
        $(modalID).find('form').trigger('reset');  
    });
}

User · Answer

dialogElement  empty       dialogElement  remove      this fixes it for real

User · Answer

this  dialog  destroy   remove     This will destroy the dialog and then remove the div that was  hosting  the dialog completely from the DOM

User · Answer

Why do you want to remove it   If it is to prevent multiple instances being created  then just use the following approach         myDialog         dialog                  title   Error            close  function event  ui                            this  dialog  close                          And when the error occurs  you would do         myDialog   html  Ooops         myDialog   dialog  open

User · Answer

This is worked for me      lt div gt We failed lt  div gt         dialog                title   Error           close  function event  ui                          this  dialog  close                  this  remove                        Cheers   PS  I had a somewhat similar problem and the above approach solved it

User · Answer

You can do use    dialogElement  empty          dialogElement  remove

User · Answer

An ugly solution that works like a charm for me       mydialog   dialog      open  function               div ui-widget-overlay   hide               div ui-dialog   not   first   remove

[jquery-ui] How to completely remove a dialog on close

Examples related to jquery-ui

Examples related to jquery-ui-dialog