Remove all the child elements of a DOM node in JavaScript
Child nodes can be removed from a parent with removeChild(), and a node itself can be removed with remove().
Another method to remove all child of a node is to set it’s innerHTML=”” property, it is an empty string which produces the same output. This method is not preferred to use.
Example-1: Using “removeChild()”.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head> <body> <ul> <li>Get Up in Morning</li> <li>Do some exercise</li> <li>Get Ready for school</li> <li>Study Daily</li> <li>Do homework</li> </ul> <input id="btn" type="button" value="Remove Childrens"></body><script> function deleteChild() { var e = document.querySelector("ul"); //e.firstElementChild can be used. var child = e.lastElementChild; while (child) { e.removeChild(child); child = e.lastElementChild; } } var btn = document.getElementById( "btn").onclick = function() { deleteChild(); }</script> </html> |
Output:
Before Clicking on Button:
After Clicking on Button:
Example-2: Using innerHTML=”” property.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> Document </title></head> <body> <ul> <li>Get Up in Morning</li> <li>Do some exercise</li> <li>Get Ready for school</li> <li>Study Daily</li> <li>Do homework</li> </ul> <input id="btn" type="button" value="Remove Childrens"></body><script> function deleteChild() { var e = document.querySelector("ul"); e.innerHTML = ""; } var btn = document.getElementById( "btn").onclick = function() { deleteChild(); }</script> </html> |
Output:
Before Clicking on Button:
After Clicking on Button:
Example-3 Using “removeChild()”.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head> <body> <ul> <li>Get Up in Morning</li> <li>Do some exercise</li> <li>Get Ready for school</li> <li>Study Daily</li> <li>Do homework</li> </ul> <input id="btn" type="button" value="Remove Childrens"></body><script> function deleteChild() { var e = document.querySelector("ul"); var first = e.firstElementChild; while (first) { first.remove(); first = e.firstElementChild; } } var btn = document.getElementById( "btn").onclick = function() { deleteChild(); }</script> </html> |
Output:
Before Clicking on Button:
After Clicking on Button:
Please Login to comment...