1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">.remove()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/manipulation/" title="View all posts in Manipulation">Manipulation</a> > <a href="http://api.jquery.com/category/manipulation/dom-removal/" title="View all posts in DOM Removal">DOM Removal</a></span>
</div>
</div>
<div id="remove1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.remove( [selector] )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Remove the set of matched elements from the DOM.</p>
<ul class="signatures"><li class="signature" id="remove-selector">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.remove( [selector] )</h4>
<p class="arguement"><strong>selector</strong>A selector expression that filters the set of matched elements to be removed.</p>
</li></ul>
<div class="longdesc">
<p>Similar to <code><a href="/empty">.empty()</a></code>, the <code>.remove()</code> method takes elements out of the DOM. Use <code>.remove()</code> when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use <code><a href="http://api.jquery.com/detach/">.detach()</a></code> instead.</p>
<p>Consider the following HTML:</p>
<pre><div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div></pre>
<p>We can target any element for removal:</p>
<pre>$('.hello').remove();</pre>
<p>This will result in a DOM structure with the <code><div></code> element deleted:</p>
<pre><div class="container">
<div class="goodbye">Goodbye</div>
</div></pre>
<p>If we had any number of nested elements inside <code><div class="hello"></code>, they would be removed, too. Other jQuery constructs such as data or event handlers are erased as well.</p>
<p>We can also include a selector as an optional parameter. For example, we could rewrite the previous DOM removal code as follows:</p>
<pre>$('div').remove('.hello');</pre>
<p>This would result in the same DOM structure:</p>
<pre><div class="container">
<div class="goodbye">Goodbye</div>
</div></pre>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">Removes all paragraphs from the DOM</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; margin:6px 0; }</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p>Hello</p>
how are
<p>you?</p>
<button>Call remove() on paragraphs</button>
<script>
$("button").click(function () {
$("p").remove();
});
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1">
<h4>Example: <span class="desc">Removes all paragraphs that contain "Hello" from the DOM. Analogous to doing $("p").filter(":contains('Hello')").remove().</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; margin:6px 0; }</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p class="hello">Hello</p>
how are
<p>you?</p>
<button>Call remove(":contains('Hello')") on paragraphs</button>
<script>
$("button").click(function () {
$("p").remove(":contains('Hello')");
});
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
