How to clear DOM elements created with jQuery from memory?

jquery remove element by id
jquery remove text
jquery remove appended element
jquery remove child element from parent
jquery remove parent element
jquery clear div content before append
jquery remove not working
jquery empty not working

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"?

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..

.empty(), 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  jQuery - Remove Elements. With jQuery, it is easy to remove existing HTML elements. Remove Elements/Content. To remove elements and content, there are mainly two jQuery methods: jQuery remove() Method. The jQuery remove() method removes the selected element(s) and its child elements.

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.

.remove(), .detach( [selector ] )Returns: jQuery. Description: Remove the set of matched elements from the DOM. Method 2: Using firstChild property and removeChild() method: The DOM firstChild property is used to return the firstchild Node of its parent node element. It is read-only property and does not return a text node and a comment node. The removeChild() method is used to remove a specified child node of the given element.

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.

.detach(), These methods allow us to delete elements from the DOM. .detach(). Remove the set of matched elements from the DOM. Creating DOM elements with $() can cause memory usage to increase in a leak-like manner. Full fiddles to reproduce this bug are given below. In brief every time this routine is called, jQuery sucks up more memory:

DOM Removal, When you remove element using the browser's native DOM manipulation methods, the jQuery cache is not cleaned up. This leads to DOM elements that are  Mixing jQuery with native DOM manipulation is dangerous. When you remove element using the browser's native DOM manipulation methods, the jQuery cache is not cleaned up. This leads to DOM elements that are detached from the DOM, but can never be garbage-collected. E. g. if you use removeChild():

How to create memory leaks in jQuery, After creating the element destroy it but forget to delete the variable holding it. This scenario leads to a Detached DOM which has a reference not  Previously we discussed 3 options to remove elements using jQuery. First, if you have the requirement to delete only child elements of a selected element (div/span/..) then use empty(). Second, if you want to delete a selected element with all its child elements then use remove().

How can Detached DOM elements cause memory leak in JavaScript?, Sometimes we get a requirement to delete all child nodes and remove DOM elements using jQuery to make a dynamic web page. In this  The elements are created with text/HTML, jQuery, and JavaScript/DOM. Then we append the new elements to the text with the append() method (this would have worked for prepend() too) : Example

Comments
  • Just wondering, have you try without using jQuery but only JS, same result?
  • Can we see a little bit more of the code that surrounds that code?
  • You were correct. I had to call remove(); on each of the main containers children. Apparently the jQuery data keeps existing if you don't call remove() - even when the DOM element is removed from the HTML page!
  • The problem was that I did not call remove(); on each child specifically. I just removed the HTML elements from the DOM - but apparenty that keeps them in memory if they were created with jQuery.