​x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
​
4
<style>
5
.box {
6
  background: orange;
7
  color: white;
8
  padding: 10px;
9
}
10
p {
11
  border: 1px dotted white;
12
  padding: 5px;
13
}
14
</style>
15
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
16
<script>
17
  $( function() {
18
    $( ".box p" ).click( function() {
19
      $( this ).detach();
20
    });
21
  });
22
</script>
23
​
24
<p>Click a paragraph to detach it.</p>
25
​
26
<div class="box">
27
  <p>Main content.</p>
28
  <p>More content.</p>
29
  <p>Extra content.</p>
30
</div>
31
​
32
<p>The <code>.detach()</code> method is the same as <code>.remove()</code>, except that <code>.detach()</code> keeps all jQuery data associated with the removed elements. This can be useful if you need to insert the removed elements back into the DOM at a later time.</p>