jquery: comment supprimer complètement une boîte de dialogue à la fermeture

Question

Lorsqu'une opération ajax échoue, je créer un nouveau div avec les erreurs puis de le montrer comme un dialogue. Lorsque la boîte de dialogue est fermée, je voudrais détruire complètement et retirez le div de nouveau. Comment puis-je faire cela? Mon code ressemble à quelque chose comme ceci pour le moment:

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

Lorsque j'exécute ce la boîte de dialogue s'affiche correctement, mais quand j'ai fermer la boîte de dialogue est toujours visible dans le code html (à l'aide de FireBug). Ce qui me manque ici? Quelque chose que j'ai oublié?

Mise à jour: Juste remarqué que mon code me donne une erreur dans la console de firebug.

$(this).détruire n'est pas une fonction

Toute personne en mesure de m'aider?

Mise à jour: Si je ne viens $(this).remove() au lieu de cela, le point est retiré de l'html. Mais il est entièrement retiré de la DOM? Ou dois-je en quelque sorte besoin d'appeler qui détruisent la fonction première?

Answer 1

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

Cela détruira la boîte de dialogue et supprimera ensuite la div qui "hébergeait" la boîte de dialogue complètement du DOM

Answer 2

Pourquoi voulez-vous l'enlever?

S'il s'agit d'empêcher la création de plusieurs instances, utilisez simplement l'approche suivante ...

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

Et quand l'erreur se produit, vous feriez ...

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

Answer 3

 $(dialogElement).empty();

$(dialogElement).remove();
 

cela corrige pour de vrai

Answer 4

Une solution laide qui fonctionne comme un charme pour moi:

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

Answer 5

Vous pouvez utiliser

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