Cara menghapus dialog saat ditutup

Ketika operasi ajax gagal, saya membuat div baru dengan kesalahan dan kemudian menampilkannya sebagai dialog. Ketika dialog ditutup, saya ingin menghancurkan dan menghapus div sekali lagi. Bagaimana saya bisa melakukan ini? Kode saya terlihat seperti ini saat ini:

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

Ketika saya menjalankan ini kotak dialog muncul dengan benar, tetapi ketika saya menutupnya dialog masih terlihat di html (menggunakan FireBug). Apa yang kulewatkan di sini? Sesuatu yang saya lupa?

Pembaruan: Hanya memperhatikan kode saya memberi saya kesalahan di konsol pembakar.

$ (ini) .destroy bukan fungsi

Adakah yang bisa membantu saya?

Pembaruan: Jika saya melakukan $(this).remove()sebaliknya, item tersebut dihapus dari html. Tetapi apakah itu benar-benar dihapus dari DOM? Atau apakah saya perlu memanggil fungsi penghancuran terlebih dahulu?

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

Ini akan menghancurkan dialog dan kemudian menghapus div yang "hosting" dialog sepenuhnya dari DOM

Mengapa Anda ingin menghapusnya?

Jika itu untuk mencegah beberapa kejadian dibuat, maka cukup gunakan pendekatan berikut ...

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

Dan ketika kesalahan terjadi, Anda akan melakukan ...

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

$(dialogElement).empty();

$(dialogElement).remove();

ini memperbaikinya nyata

Ini berhasil untuk saya

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

Bersulang!

PS: Saya punya masalah yang agak mirip dan pendekatan di atas menyelesaikannya.

Solusi jelek yang bekerja seperti pesona bagi saya:

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

Anda bisa menggunakannya

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

Saya menggunakan fungsi ini di semua proyek js saya

Anda menyebutnya: hideAndResetModals ("# IdModalDialog")

Anda menentukan apakah:

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