ansaurus

Question

How to remove JQuery Dialogs from the DOM

Answer 1

A:

Create an array on DOM ready and add references to the desired dialogs as you display them. Then, when you wish to remove them, pass the array to jQuery and call remove()

Josh Stodola 2010-01-19 20:52:04

Answer 2

A:

Why don't you add a custom class to dialogs that are closed. So when you close a dialog, call:

thisDialog.addClass("olddialog");

Then you can simply remove them all using:

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

Philippe Leybaert 2010-01-19 20:54:52

I'm not sure what I would add a custom class to. Remember I need to remove the outer wrapper JQuery gives it (not any html I've written), and everything underneath. So if you're suggesting I add a class to the div I originally used to create the dialog, that would just add a class to the html underneath the wrapper. Then when I try to remove it, it would just remove what's underneath the wrapper. I need a way of selecting only the outer wrappers I want. Whether that means selecting them and adding a class or just selecting them and removing them, the problem is still the same. Thanks though.

BAHDev 2010-01-19 20:58:25

Then you can use has(): $(".ui-dialog:has(.olddialog)").remove();

Philippe Leybaert 2010-01-19 21:02:28

Answer 3

A:

The proper way is $('#yourdialog').dialog('destroy').remove(); presuming your dialog has a proper ID.

CalebD 2010-01-19 20:57:25

@CalebD, thanks for this response, and I have tried it. But for whatever reason, this is not removing the dialogs that jQuery is creating. I assumed it had something to do with me trying to do a remove() on the original selector instead of on the outer wrappers that JQuery has assigned.

BAHDev 2010-01-19 21:00:46

The .dialog('destroy') call should remove all of the wrappers and restore the element to its initial state and then .remove() kicks it out of the DOM. How are you creating the dialogs?

CalebD 2010-01-19 21:25:16

Answer 4

A:

EDIT:

From other comments you made ive gleaned you want to preserve the content but doesnt dialog.destroy just return it to pre-init state ie. minus dynamic outer markup?

you could give them a unique 'dialogClass' when you create them and reference them that way or you could provide a callback that ads an id - or add the id before you dialog the element.

Although, personally i only ever use one dialog per page/view and just reset the content as needed.

prodigitalson 2010-01-19 20:57:31

Answer 5

+1 A:

SELF-ANSWER:

So based on Philippe's answer to my original question I took the following approach, which worked:

When creating the dialog, usually you're creating it based on an ID, and once JQuery creates the dialog, that html (with the ID) is still underneath the wrappers. To make sure I was removing the correct dialog, I used JQuery's has, like this:

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

This first empties the wrapper's contents, then removes it from the DOM.

Thanks to Philippe for the ideas.

BAHDev 2010-01-25 16:47:17

Answer 6

A:

I know this topic is old, but I recently ran into the same situation. For my case, I dynamically create dialogs and use .load(). jQuery really does wacky stuff with the DOM and was causing me significant troubles. There was unnecessary "crap" left in the DOM after closing, and sometimes, removing the dialog. I could not remove the "div" that it was inside of because I actually use the contents of the div to maintain some state information. I came up with the following code and tested it in a limited fashion to verify it worked. It does seem to remove all of the unnecessary baggage that jQuery was leaving behind. I even tested it opening several windows and monitored the state of the DOM during the process to ensure each dialogs' state was maintained correctly. I'll post the entire code here (with the exception of the loaded dialog which was nothing more than a div with some code in it.

    <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>

Dave 2010-06-11 13:50:48

ansaurus

tags:

views:

answers:

How to remove JQuery Dialogs from the DOM

related questions