Làm thế nào để loại bỏ hoàn toàn một hộp thoại đóng

Khi một thao tác ajax không thành công, tôi tạo một div mới với các lỗi và sau đó hiển thị nó dưới dạng một hộp thoại. Khi hộp thoại được đóng, tôi muốn hủy hoàn toàn và xóa div một lần nữa. Tôi có thể làm cái này như thế nào? Mã của tôi trông giống như thế này vào lúc này:

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

Khi tôi chạy nó, hộp thoại hiển thị chính xác, nhưng khi tôi đóng nó, hộp thoại vẫn hiển thị trong html (sử dụng FireBug). Tôi đang thiếu gì ở đây? Một cái gì đó tôi đã quên?

Cập nhật: Chỉ cần lưu ý rằng mã của tôi cung cấp cho tôi một lỗi trong bảng điều khiển firebird.

$ (this) .destroy không phải là một hàm

Bất cứ ai có thể giúp tôi ra?

Cập nhật: Nếu tôi chỉ làm $(this).remove()thay vào đó, mục sẽ bị xóa khỏi html. Nhưng nó có bị xóa hoàn toàn khỏi DOM không? Hay bằng cách nào đó tôi cũng cần phải gọi chức năng hủy đó trước?

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

Điều này sẽ phá hủy hộp thoại và sau đó loại bỏ div đã "lưu trữ" hộp thoại hoàn toàn khỏi DOM

Tại sao bạn muốn loại bỏ nó?

Nếu đó là để ngăn chặn nhiều trường hợp được tạo, thì chỉ cần sử dụng cách tiếp cận sau ...

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

Và khi xảy ra lỗi, bạn sẽ làm ...

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

$(dialogElement).empty();

$(dialogElement).remove();

cái này sửa nó cho thật

Điều này làm việc cho tôi

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

Chúc mừng!

PS: Tôi đã có một vấn đề tương tự và cách tiếp cận ở trên đã giải quyết nó.

Một giải pháp xấu xí hoạt động như một cơ duyên đối với tôi:

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

Bạn có thể sử dụng

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

Tôi sử dụng chức năng này trong tất cả các dự án js của tôi

Bạn gọi nó là: hideAndResetModals ("# IdModalDialog")

Bạn xác định nếu:

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