title: How to clear DOM elements created with jQuery from memory?
body: <p>My app is using jQuery to add lots of DOM elements on the fly. All these elements are put into a main container div.</p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p><img src="https://i.stack.imgur.com/AubEM.png" alt="Detached elements"></p>
  
  <p>My code:</p>
  
  <pre><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();
  </code></pre>
  
  <p>What is wrong with clearing DOM nodes from memory this way? Why are they retained under "nodes"?</p>