Massive IE7 Memory Leaks when destroying a JQuery UI dialog on close

Question

I have searched all over for an answer, or even a reference to this particular issue to no avail. I am using JQuery UI 1.8.7 and JQuery 1.5.1. I have a dialog that I want to not only destroy on close, but also remove from the DOM on close. This works fine in Firefox. However, when I do the same thing in IE7, I see a 6MB spike in memory usage for the browser, and this memory never gets reclaimed until I shut down the browser completely. So my first thought was, something in my dialog is causing memory leaks. I stripped out everything that I was adding, and made a simple dialog using the following code:

$('<div id="testMe">hello</div>').dialog({
    modal: true,
    autoOpen: true,
    close: function() { $(this).dialog('destroy'); }
});

When I open this dialog, close it, and then refresh the browser. I always end up with ~6MB more memory than I had before. If I open this dialog, but then refresh the browser before closing it, then I do not see any memory spike at all. I have no idea what could be causing this - I have found a bunch of threads about general JQuery UI memory leaks, but none of the fixes have done anything to remedy my situation.

I also thought that maybe some other code in my project was getting in the way. This is not the case - If I do the same thing using this jsFiddle example, I get a memory spike as well! (http://jsfiddle.net/n68Af/1/). At this point, I have no idea where else to turn or what else to do. I need to destroy these dialogs and remove them from the DOM - there are already quite a few instances of the dialogs throughout our (very large) application that bank on the fact that the dialog Div is no longer in the DOM after closing.

Edit: Changing the value of the modal flag has no effect. Also, I realize that my example does not remove the element from the DOM. Whether I do that or not, the memory leak remains. The code in my actual project is just removing the element from the dom using $(this).remove(). I simplified the example, because the real issue is the "destroy" call leaving some sort of circular reference or something that is causing the 6MB memory spike I mentioned.

Edit: After looking into this more, it doesn't seem to matter what JQuery UI widget I am using (I tried Dialog, my own custom widget, and Button). As long as I remove the element that the widget is referencing from the DOM, I see the huge memory leak in IE7. The memory leak also happens if I move the elements to somewhere else in the DOM. I tried creating a "garbage bin" DIV that I moved all the contents of my dialog to instead of removing them completely, and the same spike happened.

Any help or direction would be greatly appreciated. Thanks in advance guys!

Answer 1

$('<div id="testMe">hello</div>').dialog({
    modal: true,
    autoOpen: true,
    close: function() { $(this).dialog('destroy').remove(); }
});

This will completely remove the dialog from the DOM