The following code shows an example of the removeChild() method in JavaScript.


Demonstrating Example of the removeChild() Method in JavaScript

The following code shows an unordered list with some list items. When the user double clicks on a list item, the function f1() is called. The function calls the removeChild() method. As a result, that particular list item gets removed.

  <title>removeChild Method Demo</title>
     function f1(index)
	var x1=document.getElementById("d1");
	var x2=document.getElementById("t2");
        let num=Number(index);
       border: 4px solid #33ff99;
       border-radius: 10px;
       background-color: #5566aa;
       color: #aaffff;
       font-size: 20px;
       text-align: center;
       padding: 10px;
		margin: 50px;
       background-color: #ddeeff;
       color: #ff5566;
       font-size: 25px;
       text-align: left;
       padding: 5px;
       width: 800px;
  <div id="d1" class="c2"><br/><br/>
     Example of removeChild() Method<br/>
     Double Click on a list item to remove a color from the following list: 
     <ul id="t2">
       <li  ondblclick="f1(this.value)" value="0">Pink</li>
       <li  ondblclick="f1(this.value)" value="1">Red</li>
       <li  ondblclick="f1(this.value)" value="2">Orange</li>
       <li  ondblclick="f1(this.value)" value="3">Green</li>
       <li  ondblclick="f1(this.value)" value="4">Blue</li>
       <li  ondblclick="f1(this.value)" value="5">Purple</li>
       <li  ondblclick="f1(this.value)" value="6">Yellow</li>


Removing a Child Node using the removeChild() Method
Removing a Child Node using the removeChild() Method

Further Reading

Evolution of JavaScript from ES1 to ES2020

Introduction to HTML DOM Methods in JavaScript

JavaScript Practice Exercise