Skip to content
Related Articles

Related Articles

How to remove specific div element by using JavaScript?

Improve Article
Save Article
  • Last Updated : 09 Jul, 2021
Improve Article
Save Article

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. 
     

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            Remove specific divisible
            element using Javascript
        </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>

  • 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. 
     

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            Remove specific divisible
            element using Javascript
        </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>                   

  • 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. 
     

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            Remove specific divisible
            element using Javascript
        </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>

  • Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!