
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
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.
- Related Articles
- First and last child node of a specific node in JavaScript?
- Remove all child elements of a DOM node in JavaScript?
- How can I remove a child node in HTML using JavaScript?
- How can I remove all child elements of a DOM node in JavaScript?
- Replace a child node with a new node in JavaScript?
- Child node count in JavaScript?
- Insert a node as a child before an existing child in JavaScript?
- How to remove all child nodes from a parent node using jQuery?
- Remove a specific element from a LinkedList in Java
- How to get the child element of a parent using JavaScript?
- Value of the class attribute node of an element in JavaScript?
- How to remove a specific element from array in MongoDB?
- Java Program to count the child of root node in a JTree
- How to remove Specific Element from a Swift Array?
- Python Program to remove a specific digit from every element of the list
