HTML DOM removeChild() Method

The HTML  DOM removeChild() method is used to remove a specified child node of the given element. It returns the removed node as a node object or null if the node doesn’t exist.

Syntax:

node.removeChild(child)

Parameters: This method accepts a single parameter child which is mandatory. It represents the node that needs to be removed.

Return Value: It returns a node object which represents the removed node, or null if the node doesn’t exist. 

Example: In this example, we will remove a list item using node.removeChild() method.

html

<h1 style="color: green;">
    GeeksforGeeks
</h1>

<h2>
    DOM removeChild() Method
</h2>

<p>Sorting Algorithm</p>

<ul id="listitem">
    <li>Insertion sort</li>
    <li>Merge sort</li>
    <li>Quick sort</li>
</ul>

<button onclick="Geeks()">
    Click Here!
</button>

<script>
    function Geeks() {
        var doc = document.getElementById("listitem");
        doc.removeChild(doc.childNodes[0]);
    }
</script>

Output:

We have a complete list of HTML DOM methods, to check those please go through this HTML DOM Object Complete reference article.

Supported Browsers: The browser supported by DOM removeChild() method are listed below: 

• Google Chrome 1 and above
• Edge 12 and above
• Internet Explorer 5 and above
• Firefox 1 and above
• Opera 7 and above
• Safari 1.1 and above

We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.

My Personal Notes arrow_drop_up

Save