How to remove DOM elements without memory leaks?

by

The DOM preserves all DOM nodes, even if they have been removed from the DOM tree itself, the only way to remove these nodes is to do a page refresh (if you put the list into an iframe the refresh won’t be as noticable)

Otherwise, you could wait for the problem to get bad enough that the browsers garbage collector is forced into action (talking hundreds of megabytes of unused nodes here)

Best practice is to reuse nodes.

EDIT: Try this:

var garbageBin;
window.onload = function ()
    {
    if (typeof(garbageBin) === 'undefined')
        {
        //Here we are creating a 'garbage bin' object to temporarily 
        //store elements that are to be discarded
        garbageBin = document.createElement('div');
        garbageBin.style.display = 'none'; //Make sure it is not displayed
        document.body.appendChild(garbageBin);
        }
    function discardElement(element)
        {
        //The way this works is due to the phenomenon whereby child nodes
        //of an object with it's innerHTML emptied are removed from memory

        //Move the element to the garbage bin element
        garbageBin.appendChild(element);
        //Empty the garbage bin
        garbageBin.innerHTML = "";
        }
    }

To use it in your context, you would do it like this:

discardElement(this);

More Related Contents:

  1. If a DOM Element is removed, are its listeners also removed from memory?
  2. How do I set/unset a cookie with jQuery?
  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. How to expose IFrame’s DOM using jQuery?
  10. Finding line-wraps
  11. How to get the element clicked (for the whole document)?
  12. Check if option is selected with jQuery, if not select a default
  13. Is there a DOM event that fires when an HTML select element is closed?
  14. AngularJS: How to run additional code after AngularJS has rendered a template?
  15. Is there any “on DOM change” event? [duplicate]
  16. How do I monitor the DOM for changes?
  17. change html text from link with jquery
  18. Jquery Event Not Triggering for DOM Elements Created after page load [duplicate]
  19. Converting a recursive function into an asynchronous CPS implementation (javascript)
  20. jQuery/Javascript – How to wait for manipulated DOM to update before proceeding with function
  21. Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
  22. DOM Mutation event in JQuery or vanilla Javascript
  23. How to set DOM element as first child?
  24. How can I get access to a Highcharts chart through a DOM-Container?
  25. How can I remove wrapper (parent element) without removing the child?
  26. Unloading/Removing content from an iFrame
  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