JQuery and DOM
JQuery is one of the most famous JavaScript library online. There are so much articles in the web about it, that I feel useless to describe it again. The good parts of that library is the amazing way it handles the DOM. It is so good at that that I usually use it with other JavaScript libraries.
Now I’m working on a task and one of the main target of the completed task was the RAM usage of the code. It just has about 100 dynamic DOM elements which on every event should be removed form the tree and the RAM should be freed.
Unbind first
The first simple sub-task was to remove the event listeners. The problem is that if you don’t remove the event listeners may result in memory leaks in JS. The way JQuery removes the event listeners is with:
$(element).unbind()
That’s enough. Now the element don’t have any event listeners attached to it.
Remove
Now you must just remove the element from the tree with no fear of memory leaks, with just writing:
$(element).remove()
Related posts:
- jquery check for element existence in the DOM
- mouseclick outside a DOM element
- jQuery check for element visibility
Cool! Exactly what I was looking for. Thanks!
Hi,
Why not simply using $.empty() http://docs.jquery.com/Manipulation/empty
“Remove all child nodes from the set of matched elements.
Note that this function starting with 1.2.2 will also remove all event handlers and internally cached data.”
You’re right! “empty” removes all the event listeners.
This was a Good blog post, I will be sure to save this post in my Diigo account. Have a great evening.
Its a good post.
Really helped me out fixing my code.
Thanks