Quick Reach
The empty method
The jQuery empty method is used to remove the child elements of the given element. The jQuery has another method to delete elements called remove method, however, it removes the parent element as well.
See an empty method example
In this tutorial, we will show you how to use the empty method for different elements, but let us first look at the syntax of the empty method.
Syntax of empty method
The basic syntax of empty() to remove child element is:
$(“element”).empty();
Where an element can be a div, a paragraph, text boxes etc.
An empty div example with child element
The example below shows how to “empty” div element by using empty() method. As you click on the button “Run empty Method” it will remove div child elements (two input boxes and a paragraph).
Experience this example online
|
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
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#removeatt”).click(function(){
$(“#divtst”).empty();
});
});
</script>
</head>
<body>
<div id=“divtst” style=“color: red;font-size:20px;border:1px solid black;height:150px;width:400px;”>This is div element that will run empty method!
<input id=“child”/>
<input id=“child”/>
<p>This is child paragraph of Div</p>
</div>
<hr/>
<button id=“removeatt”>Run Empty Method</button>
</body>
</html>
|
You can see, the parent div element, that was specified in the click event of the button with empty method remains while all child elements are removed.
jQuery empty vs remove method
The following example shows the difference between the empty and remove methods of jQuery. As mentioned earlier, the empty method removes only child elements of the specified element whereas the remove method will remove both parent and child elements.
In the example, we have two div parent elements. Both has similar child elements. You can see two buttons in the example page. One button is to execute the empty method while other to execute remove method.
Click on both buttons one by one and see the difference yourself.
To open the example page, click the following link:
Experience this example online
|
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
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#removeatt”).click(function(){
$(“#divtst”).remove();
});
$(“#removeatt2”).click(function(){
$(“#divtst2”).empty();
});
});
</script>
</head>
<body>
<div id=“divtst” style=“color: red;font-size:20px;border:2px dashed black;height:150px;width:400px;”>This is div element that will run remove method!
<input id=“child1”/>
<input id=“child2”/>
<p>This is child paragraph of Div</p>
</div>
<hr />
<div id=“divtst2” style=“color: red;font-size:20px;border:1px solid black;height:150px;width:400px;”>This is div element that will run empty method!
<input id=“child1”/>
<input id=“child2”/>
<p>This is child paragraph of Div2</p>
</div>
<hr/>
<button id=“removeatt”>Run Remove Method</button>
<button id=“removeatt2”>Run Empty Method</button>
</body>
</html>
|
Also see jQuery remove
Leave A Comment?