Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Last Updated : 18 Jan, 2023
Improve Article
Save Article

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 remove elements and their content, jQuery provides two methods:

Example:

<div id="Parent">
   <div id="child1">child 1</div>
   <div id="child2">child 2</div>
   <div id="child3">child 3</div>
</div>

Syntax: The following function clears the parent “div”

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

The following function clears all the child “divs”, but leaves the parent intact.

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

Example: In this example, we will clear all div’s content inside a parent div.

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>
    <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 onclick=myFunc()>Click me</button>
  
    <Script>
        function myFunc() {
            $('#parent div').empty()
        }
    </Script>
</body>
</html>

Output:

 Clear all div's content inside a parent div

 Clear all div’s content inside a parent div


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!