So entfernen Sie einen Dialog beim Schließen vollständig

Wenn eine Ajax-Operation fehlschlägt, erstelle ich ein neues Div mit den Fehlern und zeige es dann als Dialog. Wenn der Dialog geschlossen ist, möchte ich das div komplett zerstören und wieder entfernen. Wie kann ich das machen? Mein Code sieht im Moment ungefähr so ​​aus:

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

Wenn ich dies ausführe, wird das Dialogfeld korrekt angezeigt, aber wenn ich es schließe, ist das Dialogfeld weiterhin im HTML-Code sichtbar (mithilfe von FireBug). Was vermisse ich hier? Etwas was ich vergessen habe?

Update: Ich habe gerade bemerkt, dass mein Code mir einen Fehler in der Firebug-Konsole gibt.

$ (this) .destroy ist keine Funktion

Kann mir jemand helfen?

Update: Wenn ich es $(this).remove()stattdessen mache , wird das Element aus dem HTML entfernt. Aber ist es vollständig aus dem DOM entfernt? Oder muss ich diese Zerstörungsfunktion auch zuerst aufrufen?

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

Dadurch wird der Dialog zerstört und das Div, das den Dialog "gehostet" hat, vollständig aus dem DOM entfernt

Warum möchten Sie es entfernen?

Wenn Sie verhindern möchten, dass mehrere Instanzen erstellt werden, verwenden Sie einfach den folgenden Ansatz ...

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

Und wenn der Fehler auftritt, würden Sie tun ...

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

$(dialogElement).empty();

$(dialogElement).remove();

das behebt es wirklich

Das ist für mich gearbeitet

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

Prost!

PS: Ich hatte ein etwas ähnliches Problem und der obige Ansatz hat es gelöst.

Eine hässliche Lösung, die für mich wie ein Zauber wirkt:

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

Sie können verwenden

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

Ich benutze diese Funktion in allen meinen js-Projekten

Sie nennen es: hideAndResetModals ("# IdModalDialog")

Sie definieren, ob:

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