JavaScript removeChild

In JavaScript, we have learned the creation of nodes where we create several nodes in which one is known as the Parent node or Root node, and all other nodes coming from the parent node are known as Child nodes. Sometimes there may be cases where we need to remove some or all child nodes of the parent node for which we need a method through which we can easily remove a child node.

So, in this section, we will discuss and understand the method through which we can remove a child node from its parent node. Also, we will look at some examples that will help us to understand the method well.

The removeChild() method

In order to remove a child node from a parent node, we use the removeChild () method. The removeChild () method is used for removing a child element of a node.

Syntax

The syntax for using the removeChild () method is:

In the syntax, childNode is that element of the node that we want to remove from its parent Node. Thus, as a parameter value, we pass the childNode value that we want to remove. Also, if the specified child node in the childNode is not part of the specified parentNode, then an exception will be thrown by the method. However, if the specified childNode is present in its parentNode, then the removeChild () method will remove and return that childNode from the DOM, but it does not remove that child from memory and keep it in there.

Thus, if we don't want to keep that specified childNode in the memory also and want to remove it from memory, use the below syntax:

In this syntax, we could notice that we have not stored the removed childNode in any variable (as in the above syntax), which means the removed element will not get stored anywhere in the memory too. However, it will still exist in the memory until the JS garbage collector wrecks it.

Now, let's see some examples that will help us to understand the concept better.

JavaScript removeChild() Examples

Let's have some examples to understand the practical implementation of the removeChild () method:

Example 1:

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:

The output of the above code is shown below:

In this example, we have removed the last 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

In order to remove all child methods of a root node, there are the following ways through which we can do so:

Method 1

Follow the below steps for removing all the child nodes of an element:

1. Use the firstChild property and get the first node of the element.
2. Similarly, repeat the same step until all the child elements get removed from its parent node.

Method 2

The other method is to use innerHTML property of the parent node by setting innerHTML = "" i.e. an empty string. The use of the method is shown below:

However, innerHTML is a method to remove all child nodes of an element, but the method is not preferred to be used.

So, these are the methods through which we can remove one or all child nodes of an element.