Quick Reach
What is jQuery remove method?
The jQuery comes up with methods that can be used to remove elements from your web documents. You can use remove a complete element including parent and child at one call or just child elements as well. For example, you want to remove a paragraph, a div element or text box etc. from a web document.
For that purpose, jQuery provides remove method. The remove method will remove the whole element including parent and child elements. If matched elements are more than one, all elements will be removed. For example, you have two div elements in your page.
If you remove div by using $(“div”).remove(), it will remove both divs even if both have different ids. To remove a specific one, use id or class to remove a specific element.
In this tutorial, we will show you how to use remove method on different elements, but let us first look at the syntax of jQuery remove method.
How to use the remove method?
The basic syntax of jQuery remove to remove element is:
$(“element”).remove();
Where an element can be a div, a paragraph, text boxes etc.
An example of remove div example
The example below shows how to remove div element by using remove() method. As you click on button “Run Remove Method” it will remove div element.
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
|
<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();
});
});
</script>
</head>
<body>
<div id=“divtst” style=“color: red;font-size:20px;”>This is div element to be removed</div>
<div id=“divtst2”>This is second div element</div>
<hr/>
<button id=“removeatt”>Run Remove Method</button>
</body>
</html>
|
As you can see, there are two div elements in above example. The div element with id = divtst will be removed. What happens if we simply use div rather calling it by id? See the next example.
An example of removing multiple div elements
The example below shows how to remove div element by using remove jQuery method. As you click on button “Run Remove Method” it will remove div element by using div rather div by id.
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
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#removeatt”).click(function(){
$(“div”).remove();
});
});
</script>
</head>
<body>
<div id=“divtst” style=“color: red;font-size:20px;”>This is div element to be removed</div>
<div id=“divtst2”>This is second div element</div>
<hr/>
<button id=“removeatt”>Run Remove Method</button>
</body>
</html>
|
As you can see both div elements are removed.
Using remove method for deleting the parent and child elements
The example below shows a parent element (div) and its three child elements (two text boxes and one paragraph). As you click on button “Run Remove Method”, what will happen..? See by clicking the image or text link below:
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”).remove();
});
});
</script>
</head>
<body>
<div id=“divtst” style=“color: red;font-size:20px;border:2px dashed black;”>This is div element to be removed
<input id=“child1”/>
<input id=“child2”/>
<p>This is child paragraph of Div</p>
</div>
<hr/>
<button id=“removeatt”>Run Remove Method</button>
</body>
</html>
|
As you can see, all child elements including the parent are removed. The dashed line shows the main div and three elements inside it.
Difference between jQuery remove and empty methods example
The example below shows the difference between remove and empty methods of jQuery. As mentioned earlier, the remove method deletes parent and child elements that are specified. Whereas the empty() method only removes child elements.
See running example below where two buttons are given; one runs the remove method on one div and other runs empty method on another div with the same number of child elements. See the output yourself and you will understand the difference:
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>
|
Read also: jQuery empty method
Leave A Comment?