Menu
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?
828
I n this tutorial, we are going to see how to Remove Elements from DOM in jQuery. If you want to remove the element itself along with everything in it, just use jQuery’s remove () method. The following example will show you how to completely remove a div block from the DOM.
- GeeksforGeeks How to remove all paragraphs from the DOM using jQuery ? To remove elements and content, we use jQuery remove () method which removes the selected element as well as everything inside it, also it will remove all bound events associated with that target element. Welcome to GeeksforGeeks!
The most elegant way I could find is to listen to the dialog's close event, and destroy it. This way both ESCAPE and the OK button close the dialog, and then the event listener kicks in and removes the dialog from the DOM. Show activity on this post. Show activity on this post.
.remove( [selector ] )Returns: jQuery. Description: Remove the set of matched elements from the DOM. A selector expression that filters the set of matched elements to be removed. Similar to .empty(), the .remove() method takes elements out of the DOM.
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.
71
The proper way is $('#yourdialog').dialog('destroy').remove(); presuming your dialog has a proper ID.
21
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
