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= </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:
