jquery remove() and detach() method

Question

I m not being able to distinguish between the jquery remove() and detach() method as both are acting same or working same ,plz consider the code:

 <script>
$(document).ready(function(){
$("#btn1").click(function(){
  $("body").append($("#p1").detach());
    });
  $("#btn2").click(function(){
  $("body").append($("#p2").remove());
    });
 $("p").click(function(){
    $(this).animate({fontSize:"+=1px"})
  });
});
</script>

When reposting a question, please close the first one before opening a new one. [stackoverflow.com/questions/14734565/...](http://stackoverflow.com/questions/14734565/difference-between-remove-and-detach-in-jquery) — War10ck, Feb 06 '13 at 17:44
@MaizerePathak Just delete the question as referenced here [meta.stackoverflow.com/questions/40539/...](http://meta.stackexchange.com/questions/40539/how-do-i-close-question-that-cannot-be-answered) and read the [FAQ](http://stackoverflow.com/faq) for future posting guidelines. — War10ck, Feb 06 '13 at 17:50
A demo to show the difference: http://jsfiddle.net/L6CEA/. Click on both paragraphs, the font size will change. Now, click the buttons and then the paragraphs again. The *detached* paragraph will still change size. The *removed* paragraph won't. — Felix Kling, Feb 06 '13 at 17:51
@FelixKling i thought that data are just the text node,i was misunderstanding the term data.Thanku — Maizere Pathak, Feb 08 '13 at 11:52

score 2 · Accepted Answer · answered Feb 06 '13 at 17:36

2

From the docs:

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

remove() destroys the element completely. detach() removes the element, keeping its data intact.

answered Feb 06 '13 at 17:36

Evan Davis

35,493
6
50
57

if they are different to each other they should also work diffrent – Maizere Pathak Feb 06 '13 at 17:37
The do work differently. – Evan Davis Feb 06 '13 at 17:38
but in the code above they are working the same – Maizere Pathak Feb 06 '13 at 17:39
They both remove elements from the DOM, yes, but in the case of `detach` you can hold the returned element in a variable and reattach it later, event handlers and data intact. – Evan Davis Feb 06 '13 at 17:40
1

@MaizerePathak You're not going to see the differnece visually. It's behind the scenes. jQuery is keeping all the elements associated data (in JavaScript) with `.detach()` while it destroys it with `.remove()`. Visually they are the same. You're not going to see the JavaScript data on the screen. – War10ck Feb 06 '13 at 17:40
@Mathletics remove() is also holding the element that has been removed in the above code – Maizere Pathak Feb 06 '13 at 17:41
@MaizerePathak ok, but it has lost its associated data. – Evan Davis Feb 06 '13 at 17:43
2

@Maizere: You can clearly see that the behaviour of the two methods are different: http://jsfiddle.net/L6CEA/. Click on both paragraphs, the font size will change. Now, click the buttons and then the paragraphs again. The *detached* paragraph will still change size. The *removed* paragraph won't. – Felix Kling Feb 06 '13 at 17:46
@MaizerePathak Please read the docs on [`.remove()`](http://api.jquery.com/remove/) and [`.detach()`](http://api.jquery.com/detach/). That's what they are there for. – War10ck Feb 06 '13 at 17:46

score 0 · Answer 2 · answered Feb 06 '13 at 17:38

The detach method doesn't remove interal jQuery data that are associated with the elements (e.g. event bindings), so it's only if there is any such data that you would see any difference.

To move an element from one place to another in the document, you don't have to remove it or detach it, just append it in the new place:

$("body").append($("#p1"));

score 0 · Answer 3 · answered Feb 06 '13 at 17:38

You're not going to see a visible difference between the two. This excerpt is taken from the jQuery documentation:

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

Please review the API documentation on each of these calls:

jQuery Remove

jQuery Detach

score 0 · Answer 4 · answered Feb 06 '13 at 17:48

As explained by the documentation, $.detach() retains the associated jQuery data whereas $.remove() removes that data. This data contains things like the bound events, the animation queue and whatever you manually added with $.data().

In your original example, you should be able to notice the difference in the following scenario:

Click the paragraph.
Click the button.
Click the paragraph again.

For #p1 and #btn1, clicking the paragraph the second time will still trigger the click handler and bump the font size. This is because the event handler is stored in the data and is retained by detach(). Thus, when reattaching it to the DOM, the handler is still bound.

For #p2 and #btn2 however, the event handler is removed by remove() and clicking on the paragraph the second time won't do anything.

Side note: you don't need to call detach() when you're immediately appending it to the DOM again. detach() may be interesting if you want to store the element in a variable for a while until it needs to be re-appended (with the same data and behaviour). remove() is commonly used to just destroy an element, also cleaning up any associated data.

jquery remove() and detach() method

4 Answers4