Question

我遇到过需要在创建新对话框之前手动删除旧对话框的情况。在另一个线程中，建议使用以下方法：

$('.ui-dialog').empty().remove();

我认为这会有效，但我确实有其他对话框，我不想从DOM中删除，我认为这种方法将摆脱所有这些。使用Firebug检查页面显示，一旦JQuery从您提供的html中创建了一个对话框，它就会为它提供标准的包装器div，它们都具有相同的类。这些是：

ui-dialog ui-widget ui-widget-content ui-corner-all  ui-draggable

所以它们非常通用，并且很难找到关于外部包装类的独特特性。我正试图找到一种方法来只删除我想删除的对话框，并留下其他对话框。有什么想法吗？

Answer 1

我知道这个话题很老，但我最近遇到了同样的情况。对于我的情况，我动态创建对话框并使用.load（）。 jQuery真的对DOM有些古怪，并且给我带来了很大的麻烦。关闭后，DOM中没有留下不必要的“废话”，有时会删除对话框。我无法删除它里面的“div”，因为我实际上使用div的内容来维护一些状态信息。我提出了以下代码并以有限的方式对其进行了测试以验证其是否有效。它似乎确实消除了jQuery留下的所有不必要的包袱。我甚至测试了它打开几个窗口并监视过程中DOM的状态，以确保正确维护每个对话框的状态。我将在这里发布整个代码（除了加载的对话框，它只不过是带有一些代码的div。

    <html>
        <head>
            <link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
            <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
            <script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>

            <script type="text/javascript">
                $(document).ready (function () {
                    $("#openDialog").click (function () {
                        $("<div></div>")
                            .load ("loadDialogTest.php")
                            .appendTo ($("#containingDiv"))
                            .dialog ({
                            autoOpen: 'false',
                            title: 'Test This!',
                            close: function () {
                                $(this).dialog ('destroy').remove ();
                            }
                        }).dialog ('open');
                    });
                });
            </script>
        </head>

        <body>
            <a href="#" id="openDialog">Open it</a>

            <div id="containingDiv">
            </div>
        </body>

    </html>

Answer 2

正确的方法是$('#yourdialog').dialog('destroy').remove();假设您的对话框具有正确的ID。

Answer 3

<强> SELF-解答：

基于菲利普对我原来问题的回答，我采取了以下方法，其中有效：

创建对话框时，通常是基于ID创建它，一旦JQuery创建了对话框，html（带有ID）仍然在包装器下面。为了确保我删除了正确的对话框，我使用了JQuery的has，如下所示：

$('.ui-dialog:has(#' + $myDialogDiv.attr('id') + ')').empty().remove();

首先清空包装器的内容，然后将其从DOM中删除。

感谢Philippe的想法。

Answer 4

在DOM上创建一个数组，并在显示时添加对所需对话框的引用。然后，当您想要删除它们时，将数组传递给jQuery并调用remove()

Answer 5

为什么不在关闭的对话框中添加自定义类。因此，当您关闭对话框时，请致电：

thisDialog.addClass("olddialog");

然后你可以使用以下方法删除它们：

$(".olddialog").remove();

Answer 6

修改：

从你收集到的其他评论中你想要保留内容，但没有dialog.destroy只是将它返回到pre-init状态即ie。减去动态外部标记？

你可以在创建它们时给它们一个独特的'dialogClass'并以这种方式引用它们，或者你可以提供一个广告id的回调 - 或者在你对话元素之前添加id。

虽然，我个人每页/视图只使用一个对话框，只需根据需要重置内容。

如何从DOM中删除JQuery Dialogs

6 个答案: