如何在关闭时完全删除对话框答案

【问题标题】：How to completely remove a dialog on close如何在关闭时完全删除对话框
【发布时间】：2011-02-21 07:49:42
【问题描述】：

当 ajax 操作失败时，我会创建一个包含错误的新 div，然后将其显示为对话框。当对话框关闭时，我想再次完全销毁并删除 div。我怎样才能做到这一点？我的代码现在看起来像这样：

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

当我运行此对话框时，对话框正确显示，但当我关闭它时，对话框在 html 中仍然可见（使用 FireBug）。我在这里想念什么？我忘记了什么？

更新：刚刚注意到我的代码在萤火虫控制台中给了我一个错误。

$(this).destroy 不是函数

谁能帮帮我？

更新：如果我只使用$(this).remove()，则该项目将从 html 中删除。但它是否完全从 DOM 中删除？或者我是否也需要先调用该destroy函数？

【问题讨论】：

标签： jquery-ui jquery-ui-dialog

【解决方案1】：

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

【讨论】：

【解决方案2】：

这对我有用

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

干杯！

PS：我遇到了类似的问题，上面的方法解决了。

【讨论】：

您正在从 close 回调中调用 close 方法！ jQuery UI 足够聪明，可以防止由此建议的无限循环，但它仍然是多余的，我绝对不会认为它很优雅。
在撰写答案时，如果没有$(this).dialog("close");，对话框根本不会消失。 jQuery 有时很奇怪。

【解决方案3】：

你可以使用

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

【讨论】：

【解决方案4】：

$(dialogElement).empty();

$(dialogElement).remove();

这确实修复了它

【讨论】：

【解决方案5】：

为什么要删除它？

如果是为了防止创建多个实例，那么就使用下面的方法...

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

当错误发生时，你会这样做......

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

【讨论】：

我只是认为它会更容易，因为它会包含不同的内容，具体取决于我从 ajax 调用返回的内容。而且 div 也不是像我在示例中显示的那样是静态的，而是由 github.com/nje/jquery-tmpl 插件呈现的。如果你有一个很好的方法来换掉对话框的内容，我会很想看看 :)
好吧，在我的例子中，我选择了一个非常简单的选项，即只用对话框 div 转储一个字符串：$('#myDialog').html("Ooops.");您也可以修改它以更改对话框 div 中任何子控件的内容。
这不是一个好方法，因为所有 dialogOptions 都将保留在 #myDialog 上，除非您专门覆盖它们。第二个对话框不应（总是）具有与第一个对话框相同的按钮、高度等。

【解决方案6】：

一个丑陋的解决方案对我来说就像一个魅力：

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

【讨论】：

它的工作方式有点奇怪。您打开对话框并立即将其删除...

【解决方案7】：

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

这将销毁对话框，然后从 DOM 中完全删除“托管”对话框的 div

【讨论】：

小心在 FF 和打开 Firebug 的情况下使用它。它会崩溃。 code.google.com/p/fbug/issues/detail?id=6290 我花了好几个小时……弄清楚我的代码出了什么问题。
如果您使用 DOM 中的 div，因此不是动态创建的，请使用 .empty()。然后你可以重复使用它，如果你再次填写内容。
@HendryH.，这似乎不再是 Firefox 23.0 和 Firebug 1.11.4 的问题。
destroy 有必要吗？删除元素不会破坏对话框吗？
见：stackoverflow.com/questions/9124389/…