Skip to content
Related Articles

Related Articles

How to clear all div’s content inside a parent div ?
  • Last Updated : 23 Jul, 2020

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.


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

Syntax: The following function clears the parent “div”


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

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



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


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


My Personal Notes arrow_drop_up
Recommended Articles
Page :