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

Question

If a DOM Element is removed  are its listeners removed from memory too

User · Answer

Just extending other answers     Delegated events handlers will not be removed upon element removal      body   on  click     someEl   function  event     console log event            someEL   remove       removing the element from DOM   Now check       data document body   events

User · Answer

Regarding jQuery  the following common methods will also remove other constructs such as data and event handlers   remove       In addition to the elements themselves  all bound events and jQuery data associated with the elements are removed     empty       To avoid memory leaks  jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves    html       Additionally  jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content

User · Answer

regarding jQuery      the  remove   method takes elements out of the   DOM  Use  remove   when you want to remove the element itself  as well   as everything inside it  In addition to the elements themselves  all   bound events and jQuery data associated with the elements are removed    To remove the elements without removing data and events  use  detach     instead    Reference  http   api jquery com remove   jQuery v1 8 2  remove   source code   remove  function  selector  keepData         var elem          i   0       for      elem   this i      null  i               if    selector    jQuery filter  selector    elem     length                 if    keepData  amp  amp  elem nodeType     1                     jQuery cleanData  elem getElementsByTagName                         jQuery cleanData    elem                                 if   elem parentNode                     elem parentNode removeChild  elem                                       return this      apparently jQuery uses node removeChild    According to this   https   developer mozilla org en-US docs DOM Node removeChild     The removed child node still exists in memory  but is no longer part of the DOM  You may reuse the removed node later in your code  via the oldChild object reference   ie event listeners might get removed  but node still exists in memory

User · Answer

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    JScript memory leaks Memory leaks in IE8 JavaScript Memory Leaks   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

User · Answer

Don t hesitate to watch heap to see memory leaks in event handlers keeping a reference to the element with a closure and the element keeping a reference to the event handler   Garbage collector do not like circular references   Usual memory leak case  admit an object has a ref to an element  That element has a ref to the handler  And the handler has a ref to the object  The object has refs to a lot of other objects  This object was part of a collection you think you have thrown away by unreferencing it from your collection     the whole object and all it refers will remain in memory till page exit     you have to think about a complete killing method for your object class or trust a mvc framework for example   Moreover  don t hesitate to use the Retaining tree part of Chrome dev tools

User · Answer

Yes  the garbage collector will remove them as well  Might not always be the case with legacy browsers though

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

Examples related to javascript

Examples related to jquery

Examples related to dom

Examples related to memory

Examples related to memory-leaks