Waiting Answer November 05, 2023

How to Remove an Particular HTML Element Using JavaScript?

Answers
2023-12-06 12:05:59

To delete a particular HTML tag using JavaScript, you can use the remove() method. This method removes an element (or node) from the document . Here’s an example of how to use it:

          const element = document.getElementById("myTag");
          element.remove();
In this example, the remove() method is used to remove the element with the ID myTag from the document.

 

**Alternatively, you can also use the removeChild() method to remove a child node from the document . Here’s an example of how to use it:

   In this example, the remove() method is used to remove the element with the ID myTag from the document.

          const parent = document.getElementById("myParent");
          const child = document.getElementById("myChild");
          parent.removeChild(child);
In this example, the removeChild() method is used to remove the child element with the ID myChild from the parent element with the ID myParent.

2024-01-24 07:55:01

Using removeChild() method

We will create a button and when a user clicks that button the function will be called and that function will remove the element.

Example: This example uses removeChild() method to remove the HTML element:

<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to remove an HTML element
        using JavaScript ?
    </title>

    <style>
        #GFG_DIV {
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }
    </style>
</head>

<body style="text-align:center;">

    <h1 style="color:green;">
        GeeksForGeeks
    </h1>

    <p id="GFG_UP" style="font-size: 19px; font-weight: bold;">
    </p>

    <div id="GFG_DIV">
        This is Div box.
    </div>
    <br>

    <button onClick="GFG_Fun()">
        click here
    </button>

    <p id="GFG_DOWN" style="color: green;
                            font-size: 24px;
                            font-weight: bold;">
    </p>

    <!-- Script to remove HTML element -->
    <script>
        let up = document.getElementById('GFG_UP');
        let down = document.getElementById('GFG_DOWN');
        let div = document.getElementById('GFG_DIV');
        up.innerHTML = "Click on button to remove the element.";

        function GFG_Fun() {
            div.parentNode.removeChild(div);
            down.innerHTML = "Element is removed.";
        }
    </script>
</body>

</html>

 

 

Using remove() Method

In this method, we are removing an element in HTML by the use of the remove method. We will create a button and when a user will click that button the function will be called and that function will remove the element.

Example: This example uses remove() method to remove an HTML element from the document:

<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to remove an HTML element
        using JavaScript ?
    </title>

    <style>
        #GFG_DIV {
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }
    </style>
</head>

<body style="text-align:center;">

    <h1 style="color:green;">
        GeeksForGeeks
    </h1>

    <p id="GFG_UP" style="font-size: 19px; font-weight: bold;">
    </p>

    <div id="GFG_DIV">
        This is Div box.
    </div>
    <br>

    <button onClick="GFG_Fun()">
        click here
    </button>

    <p id="GFG_DOWN" style="color: green;
                            font-size: 24px;
                            font-weight: bold;">
    </p>

    <!-- Script to remove HTML element -->
    <script>
        let up = document.getElementById('GFG_UP');
        let down = document.getElementById('GFG_DOWN');
        let div = document.getElementById('GFG_DIV');
        up.innerHTML = "Click on button to remove the element.";

        function GFG_Fun() {
            div.remove();
            down.innerHTML = "Element is removed.";
        }
    </script>
</body>

</html>

 

Your Answer

Recently Asked Questions

PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language.PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language.

Python has a variety of libraries such as NumPy, pandas, and matplotlib that make it an ideal language for data analysis and visualization.

Java is commonly used for building enterprise-scale applications.