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: