jQuery: Removing the jQueryUI dialog elements on close

March 24th, 2010 by jeremychone

By default, $(..).dialog(”close”) or even $(..).dialog(”destroy”) leaves some html element in the DOM. Could be an issue when you expect to have it removed.

Here is a little trick

$("<div title='my transient dialog'>Some content</div>").dialog({
    close: function(event, ui){
                // Remove the dialog elements
                // Note: this will put the original div element in the dom
		$(this).dialog("destroy");
                // Remove the left over element (the original div element)
		$(this).remove();
	}
    });

Now, clicking on the close button or calling ‘close’ will remove the dialog elements completely

2 Responses to “jQuery: Removing the jQueryUI dialog elements on close”

  1. Garland Pope Says:

    Thanks!

  2. Christopher Cox Says:

    Thanks for this snippet. Useful for me when popping a YouTube video player into the dialog. Now when the dialog is closed, the video player is removed as well. Previously, the audio had kept on playing, even though the user couldn’t see the video any longer. Thanks!

Leave a Reply