In JavaScript, we have examined the process of node creation, where multiple nodes are generated, with one designated as the Parent node or Root node. The remaining nodes that stem from the parent node are referred to as Child nodes. There are instances when it becomes necessary to eliminate certain or all child nodes from the parent node, for which we require a method that allows us to conveniently remove a child node.
In this segment, we will explore and comprehend the technique utilized to eliminate a child node from its parent node. Additionally, we will examine several examples that will assist us in grasping this method effectively.
The removeChild method
To eliminate a child node from its parent node, the removeChild method is utilized. This method serves the purpose of removing a child element associated with a specific node.
Syntax
The syntax for employing the removeChild function is as follows:
let childNode = parentNode.removeChild(childNode);
In the syntax, the term childNode refers to the specific element within the node that we intend to eliminate from its parent Node. Therefore, we provide the value of childNode we aim to remove as a parameter. Additionally, if the indicated child node in childNode is not a component of the designated parentNode, the method will throw an exception. Conversely, if the specified childNode exists within its parentNode, the removeChild method will successfully detach and return that childNode from the DOM. However, it is important to note that this method does not free the child from memory; it remains retained there.
Therefore, if our intention is to not retain that particular childNode in memory and to eliminate it entirely, the following syntax should be utilized:
parentNode.removeChild(childNode);
In this syntax, it is apparent that we have not assigned the deleted childNode to any variable (as demonstrated in the previous syntax), indicating that the removed element will not be retained in any memory location. Nonetheless, it will continue to reside in memory until it is eliminated by the JavaScript garbage collector.
At this point, let's explore a few examples that will enhance our understanding of the concept.
JavaScript removeChild Examples
To grasp the practical application of the removeChild method, let’s explore a few examples:
Example 1:
<html>
<body>
<ul id = "id_1">
<li>John</li>
<li>Rone</li>
<li>Jessy</li>
<li>Daisy</li>
<li>Harry</li>
</ul>
<script>
var getChild = document.getElementById("id_1");
getChild.removeChild(getChild.childNodes[1]);//Removing the first child in the list
</script>
</body>
</html>
The output of the above code is shown below:
Code Explanantion
- The above code is an HTML and JavaScript implementation where we have created an unordered list containing some items in the list. Also, the list is provided with an id, i.e., id="id_1".
- In the script section, we have fetched the unordered list id via document.getElementById.
- We can understand that in the code, 'getChild' is the parentNode, and the specified index 1 value as the childNode value is the child element that we want to remove.
- The removeChild method searches for the element present at index value 1, return and remove the element from the list.
- If there was the case that the specified item was not found by the method, it would have thrown the exception that the specified item was not found.
- Also, after getting removed from the list, the item will still reside in the memory as we have not removed it from memory.
Example 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul id="id_2">
<li>Ready</li>
<li>Steady</li>
<li>Go</li>
</ul>
<script>
let getChild = document.getElementById('id_2');
getChild.removeChild(getChild.lastElementChild);//To remove the last element in the list
</script>
</body>
</html>
The output of the above code is shown below:
In this scenario, we have eliminated the final child element from the list.
In the code:
- We have created an unordered list by listing some elements within it.
- Also, we have created an 'id = id_2' for the <ul> element which will help to fetch the list item via document.getElementById method.
- In the JS code, we have removed the last child element from the list using the removeChild method.
Note: The removeChild method is for removing only one child element from the root element, but if we want to remove all child elements from the root element, there are other methods also available through which we can remove all the child elements of a root node.
Remove all child nodes
To eliminate all child methods associated with a root node, we have several approaches to achieve this:
Method 1
To eliminate all child nodes of a specified element, adhere to the following instructions:
- Utilize the firstChild property to retrieve the initial node of the element.
- In the same manner, continue this process until every child element has been detached from its parent node.
let getChild = document.getElementById('id_1');
while (getChild.firstChild) {
getChild.removeChild(getChild.firstChild);
}
Method 2
Another approach involves utilizing the innerHTML property of the parent node by assigning it an empty string, specifically innerHTML = "". The application of this method is demonstrated below:
let getChild = document.getElementById('id_1');
getChild.innerHTML = '';
Nevertheless, innerHTML serves as a technique for eliminating all child nodes from a given element; however, its utilization is generally discouraged.
Thus, the following are the techniques available for the removal of one or all child nodes from a given element.