How to use removeChild() method In Javascript

Using remove() method

In this approach, we are removing an element in HTML by the use of the removeChild. we will create a button and when a user clicks that button the function will be called and that function will remove the element.

Example: This example uses removeChild() method to remove the HTML element.

html

<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        How to remove an HTML element
        using JavaScript ?
    </title>
 
    <style>
        #GFG_DIV {
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }
    </style>
</head>
 
<body style="text-align:center;">
 
    <h1 style="color:green;">
        w3wiki
    </h1>
 
    <p id="GFG_UP" style="font-size: 19px; font-weight: bold;">
    </p>
 
    <div id="GFG_DIV">
        This is Div box.
    </div>
    <br>
 
    <button onClick="GFG_Fun()">
        click here
    </button>
 
    <p id="GFG_DOWN" style="color: green; 
                            font-size: 24px; 
                            font-weight: bold;">
    </p>
 
    <!-- Script to remove HTML element -->
    <script>
        let up = document.getElementById('GFG_UP');
        let down = document.getElementById('GFG_DOWN');
        let div = document.getElementById('GFG_DIV');
        up.innerHTML = "Click on button to remove the element.";
 
        function GFG_Fun() {
            div.parentNode.removeChild(div);
            down.innerHTML = "Element is removed.";
        }
    </script>
</body>
 
</html>

Output:

Remove an HTML element

How to remove an HTML element using JavaScript ?

In this article, we are going to learn how can we remove an HTML element using JavaScript. we will be given an HTML element, the task is to remove the HTML element from the document using JavaScript.

These are the following ways to solve this problem:

Table of Content