Open In App

How to clear all div’s content inside a parent div ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are given an HTML document containing div elements and the task is to remove the existing HTML elements using jQuery. To accomplish this task, we can use the following methods:

jQuery remove() method

The remove() method in jQuery is used to remove the selected HTML from the HTML document. It can be used to clear all the div’s content inside the parent element.

Syntax:

$('selected_element').remove();

Example: The below code example will illustrate the use of the remove() method to clear the parent element.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
          initial-scale=1.0">
 
    <script src=
    </script>
</head>
 
<body>
    <center>
        <div id="parent">
            Parent div
            <div id="child1">
                Child 1
            </div>
            <div id="child2">
                Child 2
            </div>
            <div id="child3">
                Child 3
            </div>
        </div>
 
        <button id="myBtn">
            Click me
        </button>
    </center>
 
    <script>
        $(document).ready(()=>{
            $('#myBtn').click(()=>{
                $('#parent').
                children().remove();
            });
        });
    </script>
</body>
 
</html>


Output:

removeChildGIF

jQuery empty() method

The empty() method of jQuery will clear the HTML of the selected element from HTML document.

Syntax:

$('#parent').empty();

Example: In this example, we will clear all div’s content inside a parent div using empty() method.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
          initial-scale=1.0">
 
    <script src=
    </script>
</head>
 
<body>
    <center>
        <div id="parent">
            Parent div
            <div id="child1">
                Child 1
            </div>
            <div id="child2">
                Child 2
            </div>
            <div id="child3">
                Child 3
            </div>
        </div>
 
        <button id="myBtn">
            Click me
        </button>
    </center>
 
    <script>
        $(document).ready(()=>{
            $('#myBtn').click(()=>{
                $('#parent div').
                empty();
            });
        });
    </script>
</body>
 
</html>


Output:

removeChildGIF

jQuery html() method

This method is used to get as well as set the inner HTML of the selected element. We can use it to clear the HTML by passing an empty string inside it.

Syntax:

$(selected_element).html('');

Example: The below example implements the html() method to clear the parent div using jQuery.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
          initial-scale=1.0">
 
    <script src=
    </script>
</head>
 
<body>
    <center>
        <div id="parent">
            Parent div
            <div id="child1">
                Child 1
            </div>
            <div id="child2">
                Child 2
            </div>
            <div id="child3">
                Child 3
            </div>
        </div>
 
        <button id="myBtn">
            Click me
        </button>
    </center>
 
    <script>
        $(document).ready(()=>{
            $('#myBtn').click(()=>{
                $('#parent div').
                html('');
            });
        });
    </script>
</body>
 
</html>


Output:

removeChildGIF



Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads