I am really wondering if jQuery remove function really remove elements from DOM.
First, I looked here but the answers are not convincing.
I encountered this problem when I noticed I am still able to manipulate elements on which I have called remove function.

My code:

<div id="container">
    <div id="div">
        This is a div
    </div>
</div>

var div = $('#div');
$('#div').remove();
$('#container').append(div);

Note: My question is not how to solve this? but I want to understand what's going on here!

Actually, this code doesn't remove the #div from the dom, but if I have any data set to the #div, it will be lost. I am pretty confused now about the behaviour of remove function. Can anyone explain this please? DEMO

I am convinced that div variable is not just a clone of the dom element, is a reference to it, because when I manipulate the div variable, (like div.html('something')) the div within the DOM get updated.
Or am I wrong?

I am really wondering if jQuery remove function really remove elements from DOM.
First, I looked here but the answers are not convincing.
I encountered this problem when I noticed I am still able to manipulate elements on which I have called remove function.

My code:

<div id="container">
    <div id="div">
        This is a div
    </div>
</div>

var div = $('#div');
$('#div').remove();
$('#container').append(div);

Note: My question is not how to solve this? but I want to understand what's going on here!

Actually, this code doesn't remove the #div from the dom, but if I have any data set to the #div, it will be lost. I am pretty confused now about the behaviour of remove function. Can anyone explain this please? DEMO

I am convinced that div variable is not just a clone of the dom element, is a reference to it, because when I manipulate the div variable, (like div.html('something')) the div within the DOM get updated.
Or am I wrong?

• javascript
• jquery
• html
• dom

• 3 Yes, api.jquery.com/remove Might unlock the mystery :)) – Tats_innit Commented May 23, 2012 at 8:59
• 3 as long as something refers to that object (stored in a variable), it's removed from the DOM, but never removed from the memory. – Joseph Commented May 23, 2012 at 9:01
• 2 @Tats_innit Dude, do you really think I didn't read that before?? – ilyes kooli Commented May 23, 2012 at 9:01
• @skafandri sup man! just a comment bro, no sweat! B-) – Tats_innit Commented May 23, 2012 at 9:01
• 1 @skafandri: There are many people who would not have read it in your shoes though. – Jon Commented May 23, 2012 at 9:03

2 Answers 2

remove() does indeed remove the element from the DOM.

However in your example, the element has been cached in memory because you assigned it to the div variable. Therefore you can still use it, and append it again, and it will still contain all the events the original did.

If what you say is right, why I loose the data bound to the div so?

If you check the source for remove() you'll see that it calls the internal cleanData function which removes the events and clears the data cache for the element. This is why you lose the information.

If you want to remove the element from the DOM, but keep the elements, use detach() instead.

Here's a fiddle to show the difference: http://jsfiddle.net/2VbmX/

had to delete the assigned variable:

delete div;