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: