如何完全在关闭时移除对话框

Question

当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中删除？还是我需要先调用那个destroy函数？

- Svish

Answer 1

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

这将销毁对话框，并从DOM完全删除托管对话框的div。

- lomaxx

---

注意在使用此功能时，如果您同时打开了Firefox和Firebug，它会导致崩溃。详情请参见：https://code.google.com/p/fbug/issues/detail?id=6290 我花费了数小时来找出代码的问题所在。 - Hendry H.

如果您正在使用来自 DOM 的 div 元素，而不是动态创建的，请使用.empty()函数。然后，如果您再次填充内容，就可以重复使用它。 - KoalaBear

@HendryH，使用Firefox 23.0和Firebug 1.11.4似乎不再是一个问题了。 - cjm

“destroy” 是必要的吗？移除元素不会同时销毁对话框吗？ - Druska

请参考：https://dev59.com/8GDVa4cB1Zd3GeqPYwDu该网页讨论的是如何在对话框关闭后移除动态元素的问题，使用jQuery UI实现。 - new name

Answer 2

你为什么想要移除它？

如果是为了防止创建多个实例，那么只需使用以下方法...

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

当错误发生时，您需要执行...

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

- Fiona - myaccessible.website

---

我只是觉得这样会更容易，因为它将根据 ajax 调用返回的内容包含不同的内容。而且，div 并不像我在示例中展示的那样是静态的，而是由 http://github.com/nje/jquery-tmpl 插件渲染的。如果你有一种很好的方法可以替换对话框的内容，我会很感兴趣看到 :) - Svish

在我的例子中，我选择了极其简单的选项，只需将一个字符串转储到对话框div中：$('#myDialog').html("Ooops.")。您也可以修改此选项以更改对话框div中任何子控件的内容。 - Fiona - myaccessible.website

这并不是一个好的方法，因为除非你特别覆盖它们，否则所有的dialogOptions都将保留在#myDialog上。第二个对话框不应该（总是）与第一个对话框具有相同的按钮、高度等。 - Michiel Cornille

Answer 3

$(dialogElement).empty();

$(dialogElement).remove();

这真正修复了它。

- Ghost1

Answer 4

这对我起作用了

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

干杯！

PS：我曾经遇到过类似的问题，上述方法解决了它。

- DMv2

---

你在 close 回调函数中调用了 close 方法！jQuery UI 足够智能，可以防止无限循环，但仍然是冗余的，我绝对不认为这是优雅的做法。 - Elezar

在回答时，如果没有 $(this).dialog("close");，对话框就不会消失。有时候 jQuery 真的很奇怪。 - DMv2

Answer 5

一种对我非常有效的丑陋解决方案：

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

- cesar

---

有点奇怪它还能工作。你打开对话框，然后立即将其移除... - Rafael Herscovici

Answer 6

你可以使用。

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

- user2994033

Answer 7

我在所有的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');  
    });
}

- Sterling Diaz