Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

52
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS
Figure 2-14. All text is italicized, and the em tags are inside the paragraph tags
.remove() and .detach()
To remove an element from the DOM entirely, the .remove() and .detach() methods are used. Both
methods remove selected elements from the DOM, but the .detach() method keeps jQuery data for the
element intact, which makes it ideal for situations in which an element will be reattached to the DOM at
some point.
Both .remove() and .detach() accept an optional selector to filter the elements being removed. In
your example, remove all paragraphs with class foo using the following:
$("p").remove(".foo");
When the code is run, the paragraph with class foo is removed from view and is no longer part of the
DOM.
To demonstrate the difference between .remove() and .detach(), you’ll have to jump ahead a bit
and use a method called .data(), which allows developers to attach information to an element without
adding additional tags or attributes .data() will be covered more thoroughly in the next section.)
First, add some data to the first paragraph in the DOM. Then, with the data added, remove the
element from the DOM using .detach(), reattach it, and attempt to read the data:
$("p:first").data("test","This is some data.");
var p = $("p:first").detach();
console.log("Data stored: "+p.data("test"));