Comment supprimer complètement une boîte de dialogue à la fermeture

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

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

Lorsque je l'exécute, la boîte de dialogue s'affiche correctement, mais lorsque je la ferme, la boîte de dialogue est toujours visible dans le html (en utilisant FireBug). Qu'est-ce que j'oublie ici? Quelque chose que j'ai oublié?

Mise à jour: Je viens de remarquer que mon code me donne une erreur dans la console Firebug.

$ (this) .destroy n'est pas une fonction

Quelqu'un peut-il m'aider?

Mise à jour: si je fais juste à la $(this).remove()place, l'élément est supprimé du html. Mais est-il complètement supprimé du DOM? Ou dois-je en quelque sorte appeler d'abord cette fonction de destruction?

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

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

Pourquoi voulez-vous le supprimer?

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

$(dialogElement).empty();

$(dialogElement).remove();

cela le corrige pour de vrai

Cela a fonctionné pour moi

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

À votre santé!

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

Une solution moche qui fonctionne comme un charme pour moi:

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

Vous pouvez utiliser

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

J'utilise cette fonction dans tous mes projets js

Vous l'appelez: hideAndResetModals ("# IdModalDialog")

Vous définissez 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');  
    });
}