Avoiding memory leaks with jQuery / .data()

Question

I'm using jQuery to dynamically create HTML elements, and now have a need to store JavaScript data against them. However, I'm now concerned about memory leaks as I never actually call 'remove' on my objects. I '.append' and '.detach' them, but never '.remove'. The documentation for jQuery seems to suggest that I should be calling remove to clean up it's footprint on the object - events, data, etc.

Is this strictly necessary on modern browsers, or will the disappearance of any reference to the element do this for me?

Another way to phrase my question; does this script snippet leak memory?

function createElement()
{    
    var newDiv = $("<div>")
       .data("test", "test data")
       .appendTo(document.body)
       .detach();

    setTimeout(createElement, 10);
}

createElement();

For that matter, does this leak memory even without the .data() call?

I'm not interested in supporting very old browsers. IE9 and better, basically.

Answer 1

From http://api.jquery.com/jQuery.data/: "The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can retrieve several distinct values for a single element one at a time, or as a set."

Also, don't forget that you can use the HTML5 data-* attributes to store data.