Remove the child node of a specific element in JavaScript?

Javascript Web Development Front End Technology

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.