jquery-ui - example - jquery popup window

jquery: cómo eliminar por completo un cuadro de diálogo al cerrar

Question

Cuando falla una operación de Ajax, creo un nuevo div con los errores y luego lo muestro como un diálogo. Cuando el diálogo está cerrado, me gustaría destruir y eliminar completamente 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 sigue siendo 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 Firebug.

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

¿Alguien capaz de ayudarme?

Actualización: si solo hago $(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?

Answer 1

Esto me funciona

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

¡Aclamaciones!

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

Answer 2

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

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

Answer 3

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

Answer 4

¿Por qué quieres eliminarlo?

Si se trata de evitar que se creen varias instancias, solo use el siguiente enfoque ...

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

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

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

Answer 5

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

esto lo arregla de verdad

Answer 6

Puedes hacer uso

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