Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Remove the child node of a specific element in JavaScript?
In this article we are going to discuss how to remove the child node of a specific element in JavaScript with appropriate examples.
To remove the child node of a specific element, there is an existing method in JavaScript called removeChild().
The removeChild() method is different from the remove() method. The remove() method helps us to remove itself. Whereas, with the help of the removeChild() method, we can remove the child node from the parent node.
Now, let’s look into the syntax and usage of removeChild() property.
Syntax
The syntax for removeChild() method is −
removeChild(childNode);
Where, childNode is the node which is to be deleted. The removed node is returned.
Example 1
This is an example program to remove the child node of a specific element in JavaScript using removeChild() method.
<!DOCTYPE html>
<html>
<head>
<title>Remove the child node of a specific element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Remove the child node of a specific element in JavaScript using removeChild()</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
<li id="m4">Oppo</li>
</ul>
<p id="result"></p>
<script>
const list = document.getElementById('Mobiles'); // Select the list from which you want to delete an element
const ele = document.getElementById('m4'); // The element to be removed from the list
list.removeChild(ele);
list.removeChild(list.firstElementChild);
</script>
</body>
</html>
On executing the above code, the below output is generated.
Example 2
This is an example program to remove the node of a specific list in JavaScript using removeChild() when the parent node is not known.
<!DOCTYPE html>
<html>
<head>
<title>Remove the child node of a specific element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Remove the child node of a specific element in JavaScript using removeChild() when the parent node is not known </h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
<li id="m4">Oppo</li>
</ul>
<p id="result"></p>
<script>
const ele = document.getElementById('m3'); // The element to be removed from the list
if(ele.parentNode){
ele.parentNode.removeChild(ele);
}
</script>
</body>
</html>
On executing the above code, the below output is generated.
Example 3
This is an example program to remove all the nodes in a list using removeChild() method where the first element of the list is deleted everytime until the list is empty.
<!DOCTYPE html>
<html>
<head>
<title>Remove the child node of a specific element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Remove all the nodes in a list using removeChild() method.</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
<li id="m4">Oppo</li>
</ul>
<p id="result"></p>
<script>
const u_list = document.getElementById('Mobiles'); // The list to be pointed.
while(u_list.hasChildNodes()){
u_list.removeChild(u_list.firstChild); // Remove the first child of list everytime until the list is null.
}
</script>
</body>
</html>
On executing the above code, the below output is generated.
Example 4
This is an example program to remove all the nodes in a list using removeChild() method where the last element of the list is deleted every time until the list is empty.
<!DOCTYPE html>
<html>
<head>
<title>Remove the child node of a specific element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Remove all the nodes in a list using removeChild() method and lastElementChild property.</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
<li id="m4">Oppo</li>
</ul>
<script>
var u_list = document.getElementById('Mobiles'); // The list to be pointed.
var element = u_list.lastElementChild; // pointing the last element of the list.
while (element) {
u_list.removeChild(element); // Remove the last child of list everytime until the list is null.
element = u_list.lastElementChild;
}
</script>
</body>
</html>
On executing the above code, the below output is generated.
5K+ Views
