Как удалить диалоги JQuery из DOM

Я столкнулся с ситуацией, когда мне нужно вручную удалить старые диалоги перед созданием новых. В другом потоке был предложен следующий метод:

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

И я думаю, что это сработает, но у меня есть другие диалоги, которые я не хочу удалять из DOM, и я думаю, что этот метод избавит их всех. Проверка страницы с помощью Firebug показывает, что как только JQuery создает диалог из html, который вы предоставляете, он дает ему стандартные обертки div, все с одинаковыми классами. Это:

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

Таким образом, они довольно общие, и трудно найти уникальную характеристику для внешних классов-оболочек, которые необходимо выполнить. Я пытаюсь найти способ удалить только диалоги, которые хочу удалить, и оставить остальные. Любые идеи?

Ответы

Ответ 1

SELF-ОТВЕТ:

Итак, на основании ответа Филиппа на мой оригинальный вопрос я принял следующий подход, который работал:

При создании диалога обычно создается его на основе идентификатора, и как только JQuery создает диалог, этот html (с идентификатором) все еще находится под обертками. Чтобы убедиться, что я удаляю правильный диалог, я использовал JQuery has, например:

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

Это сначала очищает содержимое оболочки, а затем удаляет ее из DOM.

Спасибо Филиппу за идеи.

Ответ 2

Я знаю, что эта тема старая, но я недавно столкнулся с той же ситуацией. Для моего случая я динамически создаю диалоги и использую .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>

Ответ 3

Правильный способ $('#yourdialog').dialog('destroy').remove();, предполагающий, что ваш диалог имеет правильный идентификатор.

Ответ 4

Создайте массив в DOM ready и добавьте ссылки на нужные диалоги при их отображении. Затем, когда вы хотите удалить их, передайте массив в jQuery и вызовите remove()

Ответ 5

Почему бы вам не добавить специальный класс в закрытые диалоги. Поэтому, когда вы закрываете диалог, вызывайте:

thisDialog.addClass("olddialog");

Затем вы можете просто удалить их все, используя:

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

Ответ 6

ИЗМЕНИТЬ

Из других комментариев, которые вы сделали, вы сохранили содержимое, но не dialog.destroy просто вернете его в состояние pre-init, т.е. минус динамическая внешняя разметка?

вы могли бы дать им уникальный "dialogClass", когда вы их создадите, и ссылаетесь на них таким образом, или вы можете предоставить обратный вызов, который рекламирует идентификатор, или добавить идентификатор перед диалогом элемента.

Хотя лично я использую только один диалог на странице/просмотр и только reset содержимое по мере необходимости.