How to clear all div’s content inside a parent div ?
In this article, we are given an HTML document containing div elements and the task is to remove the existing HTML elements using jQuery. To remove elements and their content, jQuery provides two methods:
- jQuery remove() Method: It removes the selected element with its child elements.
- jQuery empty() Method: 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: In this example, we will clear all div’s content inside a parent div.
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:
Clear all div’s content inside a parent div
Please Login to comment...