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

Given an HTML document containing div elements and the task is to remove the existing HTML elements using jQuery. To remove elements and its content, jQuery provides two methods:

remove(): It removes the selected element with its child elements.
empty(): It removes the child element from the selected elements.

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:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </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:

Before clicking the button:
After clicking the button:

My Personal Notes

Recommended Posts:

rahulrajendrashewale

Im Web developer + python programmer I like coffee and anime

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.