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 :-
This is some text in the div 1.
This is a paragraph in the div.
This is a sub div in div 1
This is some text in the div 2.
This is a paragraph in the div 2.
This is a sub div in div 2
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 :-
This is a simple paragraph.
This is a test paragraph 1.
This also a test paragraph 2.

Output :-
This is a simple paragraph.
This is a test paragraph 1.
This also a test paragraph 2.
