How to remove specific div element by using JavaScript?

In this article, we will discuss three simple ways to remove a specific ‘div’ element using plain Javascript.

Using parentNode.removeChild(): This method removes a specified child node from the DOM tree and returns the removed node.

  • Syntax:
    element.parentNode.removeChild(element)
  • Example: This example uses the parentNode.removeChild() method to remove a specific ‘div’ element.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                Remove specific divisible 
                element using Javasript
            </title>
        </head>
        <body style="text-align: center;">
            <h1 style="color: green;">
              GeekforGeeks
            </h1>
            <div id="gfg_up" 
                 style="font-size: 15px; 
                        font-weight: bold;">
                A Computer Science Portal for Geeks
            </div>
            <br />
            <button onclick="GFG_click()">
                click to remove
            </button>
            <hr />
            <div id="gfg_down" 
                 style="font-size: 15px; 
                        font-weight: bold;">
                A Computer Science Portal for Geeks
            </div>
      
            <script type="text/javascript">
                function GFG_click() {
                    var gfg_down = 
                    document.getElementById("gfg_down");
                    gfg_down.parentNode.removeChild(gfg_down);
                }
            </script>
        </body>
    </html>

    chevron_right

    
    

  • Output:

Using outerHTML property: The outerHTML property is used to set the contents of the HTML element. Hence we can remove a specified ‘div’ element by setting its contents to “” using the outerHTML property.

  • syntax:
    element.outerHTML=""
  • Example: This example uses the outerHTML attribute to remove a specific ‘div’ element.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                Remove specific divisible 
                element using Javasript
            </title>
        </head>
        <body style="text-align: center;">
            <h1 style="color: green;">
            GeekforGeeks
            </h1>
            <div id="gfg_up"
                style="font-size: 15px; 
                        font-weight: bold;">
                A Computer Science Portal for Geeks
            </div>
            <br />
            <button onclick="GFG_click()">
                click to remove
            </button>
            <hr />
            <div id="gfg_down"
                style="font-size: 15px; 
                        font-weight: bold;">
                A Computer Science Portal for Geeks
            </div>
      
            <script type="text/javascript">
                function GFG_click() {
                    document.getElementById("gfg_down")
                    .outerHTML = "";
                }
            </script>
        </body>
    </html>                    

    chevron_right

    
    

  • Output:

Using .remove():This method removes the specified div element and all its child nodes.

  • syntax:
    element.remove()
  • Example: This example uses the remove() method to remove a specific ‘div’ element.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                Remove specific divisible 
                element using Javasript
            </title>
        </head>
        <body style="text-align: center;">
            <h1 style="color: green;">
              GeekforGeeks
            </h1>
            <div id="gfg_up" 
                 style="font-size: 15px; 
                        font-weight: bold;">
                A Computer Science Portal for Geeks
            </div>
            <br />
            <button onclick="GFG_click()">
                click to remove
            </button>
            <hr />
            <div id="gfg_down"
                 style="font-size: 15px; 
                        font-weight: bold;">
                A Computer Science Portal for Geeks
            </div>
            <script type="text/javascript">
                function GFG_click() {
                    var gfg_down = 
                    document.getElementById("gfg_down");
                    gfg_down.remove();
                }
            </script>
        </body>
    </html>

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.