jQuery - Remove HTML Elements or Contents

Existing HTML components may be easily removed with jQuery.

You can also search for these topics, ways to remove element by id using jquery, how to remove child element in jquery, except first, remove class and attribute, class name, child element from parent, add and remove html elements dynamically with jquery, remove multiple elements, multiple class, how to remove jquery hidden element.

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.

You can also search for these topics, ways to remove element text in jquery, remove element without content, remove content after element, remove previous content, replace, jquery methods to remove elements and content example.

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 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

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.

You can also search for these topics, validate the jquery remove method, ways to remove class and event methods in jquery, method to remove style attribute in jquery, define multiple classes and attributes using jquery remove method, how to remove multiple elements using jquery, jquery remove method html, jquery remove onchange and onclick function, example, animate the jquery empty method, how to select multiple elements with jquery empty method, use of jquery empty method, example for empty() method in jquery.

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.

You can also search for these topics, filter the elements to be remove in jquery by value, jquery append the filter element to be remove, remove the all events in jquery and filter the element, filter the element to be remove in jquery with data attribute and its value, index the filter element, list out the parameters to be remove, example.