jquery: Cómo eliminar completamente 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 cuadro de 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 es algo como esto en la actualidad

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

Cuando corro de esta caja de diálogo se muestra correctamente, pero cuando lo cierro la ventana de diálogo es aún visible en el html (usando FireBug). ¿Que me estoy perdiendo aqui? Algo que he olvidado?

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

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

Cualquier persona capaz de ayudarme?

Actualización: En su lugar, 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?

Answer 1

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

Esto destruirá el cuadro de diálogo y luego quitar el div que fue "anfitrión" los de diálogo completamente del DOM

Answer 2

¿Por qué quieres eliminarlo?

Si se trata de prevenir varias instancias que se crean, a continuación, sólo tiene que utilizar el siguiente enfoque ...

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

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

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

Answer 3

Un 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

$(dialogElement).empty(); 

$(dialogElement).remove(); 

esto soluciona de verdad

Answer 5

Se puede hacer uso

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

Answer 6

Esto se trabaja para mí

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

Salud!

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