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 along with an example to see the difference with remove method, 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 example of $.empty method
The example below shows how to “empty” div element by using jQuery 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 on 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 or image:
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>
|
Further Reading: jQuery remove method
Leave A Comment?