jQuery - Remove HTML Elements or Contents
Existing HTML components may be easily removed with jQuery.
Remove Elements/Content
There are basically two jQuery techniques for removing components and content:
remove()- The chosen element is removed (and also remove its child elements).empty()- The chosen element's child elements are removed.
Related Links
jQuery remove() and empty() Methods
The remove() function in jQuery deletes the chosen element(s) and its children.
The empty() function deletes the child elements of the element chosen (s).
Example :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b1").click(function () {
$("#div1").remove();
});
$("#b2").click(function () {
$("#div2").empty();
});
});
</script>
</head>
<body>
<button id="b1">Remove DIV 1</button>
<button id="b2">Empty DIV 2</button><br /><br />
<div id="div1" style="border:1px solid black; padding:5px">
This is some text in the div 1.<br />
<p>This is a paragraph in the div.</p>
<div>This is a sub div in div 1</div>
</div>
<br />
<div id="div2" style="border:1px solid green; padding:5px">
This is some text in the div 2.<br />
<p>This is a paragraph in the div 2.</p>
<div>This is a sub div in div 2</div>
</div>
</body>
</html> Output :-
This is a paragraph in the div.
This is a paragraph in the div 2.
The "Remove div 1" button delete the complete div element with their child elements.
The "Empty div 2" button delete only the child elements of div 2.
Related Links
The remove() vs empty()
There are only few differences are there, which is
| remove() | empty |
|---|---|
| Delete all child elements and the element itself. | Delete only child elements. |
| The function has one argument. | No arguments. |
| We can filter the elements which to be deleted. | Filter not supported. |
Filter the Elements to be Removed
The remove() function of jQuery additionally accepts one argument, so that you may filter out the deleted elements.
Note:- Any of the jQuery selector syntaxes can be used as the argument.
Example :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b5").click(function () {
$("p").remove(".test");
});
$("#b6").click(function () {
$("img").remove("#img1");
});
});
</script>
</head>
<body>
<p>This is a simple paragraph.</p>
<p class="test">This is a test paragraph 1.</p>
<p class="test">This also a test paragraph 2.</p>
<button id="b5">Remove all p elements with class="test"</button><br /><br />
<img id="img1" src="../../favicon.png" alt="logo" /><br /><br />
<button id="b6">Remove an image with id="img1"</button>
</body>
</html> Output :-
This is a simple paragraph.
This is a test paragraph 1.
This also a test paragraph 2.
