Cómo eliminar completamente un diálogo al cerrar

Cuando falla una operación ajax, creo un nuevo div con los errores y luego lo muestro como un diálogo. Cuando se cierra el cuadro de diálogo, me gustaría destruir completamente y eliminar el div nuevamente. ¿Cómo puedo hacer esto? Mi código se ve así en este momento:

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

Cuando ejecuto esto, el cuadro de diálogo aparece correctamente, pero cuando lo cierro, el cuadro de diálogo aún está visible en el html (usando FireBug). ¿Que me estoy perdiendo aqui? Algo que he olvidado?

Actualización: Acabo de notar que mi código me da un error en la consola de Firebug.

$ (this) .destroy no es una función

¿Alguien puede ayudarme?

Actualización: si lo hago solo $(this).remove(), el elemento se elimina del html. ¿Pero está completamente eliminado del DOM? ¿O de alguna manera necesito llamar a esa función de destrucción primero también?

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

Esto destruirá el diálogo y luego eliminará el div que estaba "alojando" el diálogo completamente del DOM

¿Por qué quieres eliminarlo?

Si es para evitar que se creen varias instancias, simplemente use el siguiente enfoque ...

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

Y cuando se produce el error, lo harías ...

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

$(dialogElement).empty();

$(dialogElement).remove();

esto lo arregla de verdad

Esto me funcionó

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

¡Salud!

PD: tuve un problema algo similar y el enfoque anterior lo resolvió.

Una solución fea que funciona como un encanto para mí:

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

Puedes hacer uso

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

Yo uso esta función en todos mis proyectos js

Lo llamas: hideAndResetModals ("# IdModalDialog")

Usted define si:

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