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

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:
$('<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?

Answer 1

$(this).dialog('destroy').remove()
This will destroy the dialog and then remove the div that was "hosting" the dialog completely from the DOM

Answer 2

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

Answer 3

$(dialogElement).empty();
$(dialogElement).remove();
this fixes it for real

Answer 4

This is worked for me
$('<div>We failed</div>')
.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.

Answer 5

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

Answer 6

You can do use
$(dialogElement).empty();
$(dialogElement).remove();

Answer 7

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