Open In App

How to remove specific div element by using JavaScript?

Last Updated : 20 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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

These are the following methods:

Using parentNode.removeChild() method

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() {
            let 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() method

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() {
            let gfg_down =
                document.getElementById("gfg_down");
            gfg_down.remove();
        }
    </script>
</body>
 
</html>


Output:



Similar Reads

How to Make a Child Div Element Wider than Parent Div using CSS ?
When the child div element has a fixed width that is wider than the parent div element, it will display overflow outside of the parent element. Because the overflow is hidden by default, one approach is to utilize the overflow attribute to enable it on an element. Another approach includes setting the position property of the parent div element to
2 min read
How to remove gutter space for a specific div in Bootstrap ?
To remove gutter space for a specific div, first we must know what is gutter space. In Bootstrap 4, There are 12 columns in the grid system each column has a small space in between that space is known as gutter space. Gutter Space has width 30px (15px on each side of a column). The Following Approach will explain clearly. Approach: By default, Boot
2 min read
How to overlay one div over another div using CSS
Creating an overlay effect simply means putting two div together at the same place but both the div appear when needed i.e while hovering or while clicking on one of the div to make the second one appear. Overlays are very clean and give the webpage a tidy look. It looks sophisticated and is simple to design. Overlays can create using two simple CS
2 min read
How to copy the content of a div into another div using jQuery ?
Given an HTML document containing some div element and the task is to copy a div content into another div as its child using jQuery. There are two approaches to solve this problem that are discussed below: Approach 1: First, select the div element which needs to be copied into another div element.Select the target element where the div element is c
2 min read
How to force child div to be 100% of parent div's height without specifying parent's height?
When designing a website, you may want to create a layout where a child div element fills up the height of its parent div element. However, you may not know the exact height of the parent div element and you don't want to specify it. In this article, we will explore different approaches to force a child div element to be 100% of its parent div elem
4 min read
How to center a div within another div?
The div tag is used to construct a division or section of an HTML document in which other elements of HTML is placed and that division/section works like a container whose CSS styling can be done as a single unit or javascript can be used to perform various tasks on that container. Syntax: &lt;div&gt; &lt;h3&gt;'This is a div of the web page.&gt;/h
4 min read
How to center a div on the edge of another div in SASS ?
In this article, we will see how to centre a div on the edge of another div using SASS. SASS is an extension of CSS that stands for Syntactically Awesome Style Sheets. It helps us to create things like variables, nested rules, etc. So that we can reuse the code. Centering a div on the edge of another div is not a difficult task. We can achieve it b
4 min read
How to make Parent Div Activate Styling of Child Div for Hover and Active ?
In this article, we will see how to make parent div activate styling of child div for hover and active. We can do this by using Pseudo-classes like hover and active. Approaches to make parent div activate styling of child div for hover and activeUsing Pure CSS: with pseudo-classesUsing CSS and JavaScript: without pseudo-classesMethod 1: Using Pure
2 min read
How to clear all div's content inside a parent div ?
In this article, we are given an HTML document containing div elements and the task is to remove the existing HTML elements using jQuery. To accomplish this task, we can use the following methods: Table of Content jQuery remove() methodjQuery empty() methodjQuery html() methodjQuery remove() methodThe remove() method in jQuery is used to remove the
2 min read
How to make div fixed after scroll to that div ?
In this article, we will see how to make a div fixed after you scroll to it by using the position property with a sticky value. This effect is generally used on websites when an important message needs to be shown. Set the property position to sticky to create elements that behave as fixed positions whenever the user scrolls to that position. Fixin
4 min read