jquery: Comment supprimer complètement un dialogue à la fermeture

Question

Lorsqu'une opération ajax échoue, je crée une nouvelle div avec les erreurs, puis je l'affiche comme une boîte de dialogue. Lorsque la boîte de dialogue est fermée, je voudrais détruire complètement et supprimer à nouveau la div. Comment puis-je faire ceci? Mon code ressemble à ceci au moment:

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

Quand je lance ce la boîte de dialogue affiche correctement, mais quand je le fermer la boîte de dialogue est toujours visible dans le code HTML (en utilisant Firebug). Qu'est-ce que j'oublie ici? Quelque chose que j'ai oublié?

Mise à jour: J'ai juste remarqué que mon code me donnait une erreur dans la console firebug.

$ (this) .destroy est pas une fonction

Toute personne capable de me aider?

Mise à jour: Si je ne fais que $(this).remove() à la place, l'élément est supprimé du code HTML. Mais est-il complètement retiré du DOM? Ou dois-je d'une manière ou d'une autre appeler cette fonction de destruction d'abord?

Answer 1

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

Cela va détruire la boîte de dialogue puis retirez la div qui a été « hôte » la boîte de dialogue complètement du DOM

Answer 2

Pourquoi voulez-vous retirer?

Si elle est d'empêcher plusieurs instances créées, puis il suffit d'utiliser 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

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 4

$(dialogElement).empty(); 

$(dialogElement).remove(); 

ce qu'il fixe pour de vrai

Answer 5

Vous pouvez faire usage

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

Answer 6

C'est travaillé pour moi

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

Cheers!

PS: J'ai eu un problème assez similaire et l'approche ci-dessus l'a résolu.