How to completely remove a dialog on close
jquery-ui, jquery-ui-dialog
Solution
$(this).dialog('destroy').remove()
This will destroy the dialog and then remove the div that was "hosting" the dialog completely from the DOM
Problem
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: ``` $('<div>We failed</div>') .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?