The jQuery API method of .detach() will remove the specified element or elements from the DOM. If you were to look at the source code for the document after this action, you will not see the detached element shown at all.

The .detach() method is different than the .hide() method which simply inserts display: none into the style for the element. With the .detach() method the element(s) are gone and cannot be replaced.

The .detach() method is similar to the .remove() method, but there is an important difference. The .detach() method holds onto the jQuery data that is associated with the removed elements if the data needs to be reused at a later time.


Here is an example of the jQuery .detach() method.

$("#removeprices").click(function() {

This is the HTML for the example:

<div id="payHere1">
    <h2>Level 1</h2>
    <p>Qui blanditiis praesentium voluptatum deleniti.</p>
    <p class="price">$2.95</p>
<div id="payHere2">
    <h2>Level 2</h2>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus.</p>
    <p class="price">$4.95</p>
<div id="payHere3">
    <h2>Level 3</h2>
    <p>Atque corrupti, quos dolores et quas molestias.</p>
    <p class="price">$8.95</p>
<div id="payHere4">
    <h2>Level 4</h2>
    <p>Praesentium voluptatum deleniti atque corrupti.</p>
    <p class="price">$10.95</p>
<input type="button" name="removeprices" id="removeprices" value="REMOVE PRICES" />

Here is the result. Click on the button that reads Remove Prices and see what happens. Note how the elements removal affects the layout of the page.