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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:

full-stack-img




My Personal Notes arrow_drop_up

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.