如何从DOM中删除JQuery Dialogs

BAH*_*Dev 10 jquery

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

$('.ui-dialog').empty().remove();
Run Code Online (Sandbox Code Playgroud)

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

ui-dialog ui-widget ui-widget-content ui-corner-all  ui-draggable
Run Code Online (Sandbox Code Playgroud)

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

Dav*_*ave 14

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

    <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>
Run Code Online (Sandbox Code Playgroud)


Cal*_*ebD 5

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


BAH*_*Dev 5

自我回答:

因此,基于 Philippe 对我最初问题的回答,我采用了以下方法,该方法有效:

创建对话框时,通常是根据 ID 创建它,一旦 JQuery 创建对话框,该 html(带有 ID)仍位于包装器下方。为了确保我删除了正确的对话框,我使用了 JQuery 的has,如下所示:

$('.ui-dialog:has(#' + $myDialogDiv.attr('id') + ')').empty().remove();
Run Code Online (Sandbox Code Playgroud)

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

感谢菲利普的想法。