วิธีลบกล่องโต้ตอบอย่างสมบูรณ์เมื่อปิด

เมื่อการดำเนินการ ajax ล้มเหลวฉันสร้าง div ใหม่พร้อมกับข้อผิดพลาดจากนั้นแสดงเป็นกล่องโต้ตอบ เมื่อปิดกล่องโต้ตอบฉันต้องการทำลายและลบ div อีกครั้ง ฉันจะทำเช่นนี้ได้อย่างไร? รหัสของฉันมีลักษณะดังนี้:

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

เมื่อฉันเรียกใช้สิ่งนี้กล่องโต้ตอบจะปรากฏขึ้นอย่างถูกต้อง แต่เมื่อฉันปิดกล่องโต้ตอบจะยังคงมองเห็นได้ใน html (โดยใช้ FireBug) ฉันพลาดอะไรไปที่นี่? บางสิ่งที่ฉันลืม?

อัปเดต:เพิ่งสังเกตว่ารหัสของฉันทำให้ฉันมีข้อผิดพลาดในคอนโซล firebug

$ (this) .destroy ไม่ใช่ฟังก์ชัน

ใครสามารถช่วยฉันออก?

อัปเดต:หากฉันทำ$(this).remove()แทนรายการจะถูกลบออกจาก html แต่มันถูกลบออกจาก DOM อย่างสมบูรณ์หรือไม่? หรือฉันต้องเรียกใช้ฟังก์ชันการทำลายนั้นก่อนเช่นกัน?

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

การดำเนินการนี้จะทำลายกล่องโต้ตอบและลบ div ที่ "โฮสต์" กล่องโต้ตอบออกจาก DOM โดยสิ้นเชิง

ทำไมคุณถึงต้องการลบออก

หากต้องการป้องกันไม่ให้มีการสร้างหลายอินสแตนซ์ให้ใช้แนวทางต่อไปนี้ ...

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

และเมื่อเกิดข้อผิดพลาดคุณจะทำ ...

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

$(dialogElement).empty();

$(dialogElement).remove();

สิ่งนี้แก้ไขได้จริง

สิ่งนี้ใช้ได้ผลสำหรับฉัน

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

ไชโย!

PS:ฉันมีปัญหาที่ค่อนข้างคล้ายกันและวิธีการข้างต้นแก้ไขได้

วิธีแก้ปัญหาที่น่าเกลียดซึ่งเป็นเสน่ห์สำหรับฉัน:

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

คุณสามารถใช้

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

ฉันใช้ฟังก์ชันนี้ในโปรเจ็กต์ js ทั้งหมดของฉัน

คุณเรียกมันว่า hideAndResetModals ("# IdModalDialog")

คุณกำหนดว่า:

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