MooTools Elements Garbage Collection Gotchas

MooTools handles a lot of the garbage collection with elements. While Element.destroy handles some garbage collection, it\’s not obvious where else garbage collection occurs. Let\’s clear some of this up.

Garbage Collection?

Yes, garbage collection. Elements can take up a lot of memory. Add events and items stored with Element Storage to the mix and there are more things to worry about than just the elements themselves. To help with memory issues, MooTools helps with the garbage by removing events and items stored using Element Storage methods (Element.store and Element.retrieve). But it doesn\’t do it with every method that involves removing elements.

Elements.dispose
The dispose method does not handle garbage collection. It only removes the element node from the parent node.

Elements.empty
The empty method does not handle garbage collection either. It uses the dispose method when removing the child nodes of an element.

Then What Do You Do?

Well, if you intend to remove a collection of elements completely, then the simple thing is to have them all destroyed. Keep in mind doing so means that if you want to add that element back (because you kept a reference of it somewhere) then it won\’t have items stored in its storage or events you\’ve previously attached.

//If you want to get all the elements in an element using the getElements method...
someElement.getElements(\'*\').destroy();

// or if you want to use the getChildren method...
someElement.getChildren().destroy();

// or if you already have an array of elements...
[element1, element2, element3].invoke(\'destroy\');

// or if you already have a collection of elements...
$$(\'.elementsToDestroy\').destory();