Question

I have run into a situation where I need to manually remove old dialogs before creating new ones. In another thread, the following method was suggested:

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

And I think this would work, but I do have other dialogs that I do not want to remove from the DOM, and I think this method would get rid of all of them. Inspecting the page with Firebug shows that once JQuery creates a dialog out of the html you provide, it gives it standard wrapper divs, all with the same classes. These are:

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

So they’re pretty generic, and it’s hard to find a unique characteristic about the outer wrapper classes that need to go. I’m trying to find a way to only remove the dialogs that I want to remove, and leave the others. Any ideas?

Answer 1

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.