Como remover completamente uma caixa de diálogo ao fechar

Quando uma operação do ajax falha, eu crio uma nova div com os erros e a mostro como uma caixa de diálogo. Quando a caixa de diálogo estiver fechada, eu gostaria de destruir e remover completamente a div novamente. Como posso fazer isso? Meu código se parece com isso no momento:

$('<div>We failed</div>')
    .dialog(
    {
        title: 'Error',
        close: function(event, ui)
        {
            $(this).destroy().remove();
        }
    });

Quando eu executo isso, a caixa de diálogo aparece corretamente, mas quando eu a fecho, a caixa de diálogo ainda é visível no html (usando o FireBug). O que estou perdendo aqui? Algo que eu esqueci?

Atualização: Acabei de notar que meu código me apresenta um erro no console do firebug.

$ (this) .destroy não é uma função

Alguém capaz de me ajudar?

Atualização: Se eu fizer apenas isso $(this).remove(), o item será removido do html. Mas é completamente removido do DOM? Ou preciso, de alguma forma, chamar essa função de destruição também?

$(this).dialog('destroy').remove()

Isso destruirá a caixa de diálogo e removerá a div que estava "hospedando" a caixa de diálogo completamente do DOM

Por que você deseja removê-lo?

Se for para impedir que várias instâncias sejam criadas, use a seguinte abordagem ...

$('#myDialog') 
    .dialog( 
    { 
        title: 'Error', 
        close: function(event, ui) 
        { 
            $(this).dialog('close');
        } 
    }); 

E quando o erro ocorre, você faria ...

$('#myDialog').html("Ooops.");
$('#myDialog').dialog('open');

$(dialogElement).empty();

$(dialogElement).remove();

isso corrige de verdade

Isso é trabalhado para mim

$('<div>We failed</div>')
    .dialog(
    {
        title: 'Error',
        close: function(event, ui)
        {
            $(this).dialog("close");
            $(this).remove();
        }
    });

Felicidades!

PS: Eu tive um problema semelhante e a abordagem acima resolveu.

Uma solução feia que funciona como um encanto para mim:

$("#mydialog").dialog(
    open: function(){
        $('div.ui-widget-overlay').hide();
        $("div.ui-dialog").not(':first').remove();
}
});

Você pode usar

$(dialogElement).empty();    
$(dialogElement).remove();

Eu uso essa função em todos os meus projetos js

Você chama: hideAndResetModals ("# IdModalDialog")

Você define se:

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