Skip to content
Related Articles

Related Articles

How to remove specific div element by using JavaScript?
  • Last Updated : 11 Jun, 2020

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
Recommended Articles
Page :