My app is using jQuery to add lots of DOM elements on the fly. All these elements are put into a main container div.

Then, every time a new page is shown, this container div is removed using jQuery's remove(); The problem is, it seems that all the children of this container div still seem to be listed under "Nodes" in Chrome's devtools timeline.

The longer I run my app, the more DOM elements I'm creating! But when looking at the HTML source, the nodes aren't there.

My code:

    // creating lots of jquery elements and appending them to maincontainer
    var elm = document.createElement("DIV");
    var jq = jQuery(elm).text("hello");
    maincontainer.append(jq);

    // then, the main container(also a jquery object) is removed using
    maincontainer.remove();

What is wrong with clearing DOM nodes from memory this way? Why are they retained under "nodes"?

My app is using jQuery to add lots of DOM elements on the fly. All these elements are put into a main container div.

Then, every time a new page is shown, this container div is removed using jQuery's remove(); The problem is, it seems that all the children of this container div still seem to be listed under "Nodes" in Chrome's devtools timeline.

The longer I run my app, the more DOM elements I'm creating! But when looking at the HTML source, the nodes aren't there.

My code:

    // creating lots of jquery elements and appending them to maincontainer
    var elm = document.createElement("DIV");
    var jq = jQuery(elm).text("hello");
    maincontainer.append(jq);

    // then, the main container(also a jquery object) is removed using
    maincontainer.remove();

What is wrong with clearing DOM nodes from memory this way? Why are they retained under "nodes"?

• javascript
• jquery
• dom

• Just wondering, have you try without using jQuery but only JS, same result? – A. Wolff Commented Mar 21, 2014 at 14:01
• Can we see a little bit more of the code that surrounds that code? – Kevin B Commented Mar 21, 2014 at 14:49

3 Answers 3

After removing the elements from page, just clear the variables also.. so the elements which are stored internally also gets cleaned.. If the element is stored in divElements variable,

divElements.remove();
divElements = null;

I don't know it may a solution for you... but it works in my application..

I would pressume, it is still stored under nodes because you've reserved that element in a variable, forever making it accessible.

So it will reserve...

var elm = document.createElement("div");

Because that variable may be accessed again to do anything you wish to do with it, like add it back into the page and so forth.

Edit: Also if you want to 'clear' variables from stack, or in your terms 'memory' you might want to consider creating the variable under a local scope... e.g.

<button type="button" id="btn-example">Click me!</button>

$(document).on("click", "#btn-example", function() {
  var elm = $('div');
  elm.remove();
});

or in raw JS...

<button type="button" onclick="removeDiv();">Click me!</button>

function removeDiv() {
  var elm = document.getElementByTagName('div');
  elm.parentNode.removeChild(elm);
}

This is because local variables are created when the function is activated, then destroyed when the function ceases.

Always use:

$("ElementName").detach()

When you want to remove an element from DOM, it will not increase Memory of DOM and browser will not be stuck.