Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Last Updated : 23 Jul, 2020
View Discussion
Improve Article
Save Article

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=
    </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 arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!