If a DOM Element is removed, are its listeners also removed from memory?

by

Modern browsers

Plain JavaScript

If a DOM element which is removed is reference-free (no references pointing to it) then yes – the element itself is picked up by the garbage collector as well as any event handlers/listeners associated with it.

var a = document.createElement('div');
var b = document.createElement('p');
// Add event listeners to b etc...
a.appendChild(b);
a.removeChild(b);
b = null; 
// A reference to 'b' no longer exists 
// Therefore the element and any event listeners attached to it are removed.

However; if there are references that still point to said element, the element and its event listeners are retained in memory.

var a = document.createElement('div');
var b = document.createElement('p'); 
// Add event listeners to b etc...
a.appendChild(b);
a.removeChild(b); 
// A reference to 'b' still exists 
// Therefore the element and any associated event listeners are still retained.

jQuery

It would be fair to assume that the relevant methods in jQuery (such as remove()) would function in the exact same way (considering remove() was written using removeChild() for example).

However, this isn’t true; the jQuery library actually has an internal method (which is undocumented and in theory could be changed at any time) called cleanData() (here is what this method looks like) which automatically cleans up all the data/events associated with an element upon removal from the DOM (be this via. remove(), empty(), html("") etc).

Older browsers

Older browsers – specifically older versions of IE – are known to have memory leak issues due to event listeners keeping hold of references to the elements they were attached to.

If you want a more in-depth explanation of the causes, patterns and solutions used to fix legacy IE version memory leaks, I fully recommend you read this MSDN article on Understanding and Solving Internet Explorer Leak Patterns.

A few more articles relevant to this:

Manually removing the listeners yourself would probably be a good habit to get into in this case (only if the memory is that vital to your application and you are actually targeting such browsers).

More Related Contents:

  1. How to remove DOM elements without memory leaks?
  2. .prop() vs .attr()
  3. How do I select text nodes with jQuery?
  4. Check if an image is loaded (no errors) with jQuery
  5. Get selected text from a drop-down list (select box) using jQuery
  6. How to hide a in a menu with CSS?
  7. Firing event on DOM attribute change
  8. Find DOM element by ID when ID contains square brackets?
  9. Finding line-wraps
  10. jQuery or javascript to find memory usage of page
  11. Why are duplicate ID values not allowed in HTML?
  12. jQuery DOM changes not appearing in view source
  13. Check if option is selected with jQuery, if not select a default
  14. Is there a DOM event that fires when an HTML select element is closed?
  15. AngularJS: How to run additional code after AngularJS has rendered a template?
  16. How to detect when an iframe has already been loaded
  17. Is there any “on DOM change” event? [duplicate]
  18. Converting a recursive function into an asynchronous CPS implementation (javascript)
  19. jQuery/Javascript – How to wait for manipulated DOM to update before proceeding with function
  20. DOM Mutation event in JQuery or vanilla Javascript
  21. Convert String to XML Document in JavaScript
  22. How to set DOM element as first child?
  23. JQuery – animate moving DOM element to new parent?
  24. Open new window without focus on it [duplicate]
  25. How can I remove wrapper (parent element) without removing the child?
  26. window.getSelection return html [duplicate]
  27. jQuery difference between :eq() and :nth-child()
  28. What’s the difference between a jQuery object and a DOM element? Difference between .get() and .index()?
  29. In web browsers, what’s the difference between onblur and onfocusout?
  30. Create a table in SVG

Leave a Comment