Kapatıldığında bir iletişim kutusu tamamen nasıl kaldırılır

Bir ajax işlemi başarısız olduğunda, ben hatalarla yeni bir div oluşturmak ve sonra bir iletişim kutusu olarak göstermek. Diyalog kapandığında div'ı tamamen yok etmek ve kaldırmak istiyorum. Bunu nasıl yapabilirim? Kodum şu anda şöyle görünüyor:

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

Bunu çalıştırdığımda iletişim kutusu doğru bir şekilde görüntüleniyor, ancak kapattığımda iletişim kutusu html'de hala görünüyor (FireBug kullanarak). Burada ne eksik? Unuttuğum bir şey mi?

Güncelleme: Kodumun kundakçı konsolunda bana bir hata verdiğini fark ettim.

$ (this) .destroy bir işlev değil

Bana yardım edebilecek biri var mı?

Güncelleme: Sadece $(this).remove()yerine, öğe html kaldırılır. Ancak DOM'dan tamamen kaldırıldı mı? Yoksa bir şekilde önce bu yok etme işlevini de çağırmam gerekir mi?

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

Bu, iletişim kutusunu yok eder ve ardından iletişim kutusunu "barındıran" div'i tamamen DOM'dan kaldırır.

Neden kaldırmak istiyorsun?

Birden fazla örneğin oluşturulmasını önlemekse, aşağıdaki yaklaşımı kullanın ...

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

Ve hata oluştuğunda, ...

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

$(dialogElement).empty();

$(dialogElement).remove();

bu onu gerçek anlamda düzeltir

Bu benim için çalıştı

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

Şerefe!

Not: Biraz benzer bir sorunum vardı ve yukarıdaki yaklaşım sorunu çözdü.

Benim için cazibe gibi çalışan çirkin bir çözüm:

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

Kullanabilirsiniz

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

Bu işlevi tüm js projelerimde kullanıyorum

Buna şöyle diyorsunuz: hideAndResetModals ("# IdModalDialog")

Şunları tanımlarsınız:

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