Skip to content
Related Articles

Related Articles

Improve Article

How to remove specific div element by using JavaScript?

  • Last Updated : 09 Jul, 2021

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. 
 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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