Freeing memory used by unattached DOM nodes in Javascript

Question

As part of my application, I'm putting together a set of small Dom nodes that are not shown all at once. I'm storing them in an internal array. The user can invoke their display in which case I reparent them to the div that is used to display them. That's all well and good. But when it's time to replace all of them with new ones, I want to destroy the old ones (effectively deallocate them). Otherwise, over time, memory usage could grow exponentially. How do I force the browser js engine to do this? Is just setting each of the items in my array of Dom nodes to null enough? Is there something else I have to do? Or maybe I don't have to worry about this at all?

Answer 1

If you set each item to null, they will be automatically garbage collected.

Answer 2

Yes, setting the items to null should be ok… Except that some implementation details must be taken care of with Internet Explorer: its handling of circular references is dodgy. See http://msdn.microsoft.com/en-us/library/bb250448.aspx

Circular References—When mutual references are counted between Internet Explorer's COM infrastructure and any scripting engine, objects can leak memory

So you have to break circular references in some cases.