Explore Topics

How to Remove an Particular HTML Element Using JavaScript?

Last Updated : 18 Apr, 2025 - Asked By Ashok

js  delete particular html tag 

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



Other Resources

Quiz Image
Quiz

Test your knowledge with interactive quizzes.

Interview Questions Image
Interview Questions

Prepare for interviews with curated question sets.

Q&A Image
Q&A

Ask your coding-related doubts and get answers.

Certification Image
Certification

Earn certifications to enhance your resume.

internships Image
Internships

Hands-on projects to improve your skills.

Quiz Image
Quiz

Test your knowledge with interactive quizzes.

Interview Questions Image
Interview Questions

Prepare for interviews with curated question sets.

blog Image
Blogs

Add your technical blogs and read technical topics.

Certification Image
Certification

Earn certifications to enhance your resume.

Q&A Image
Q&A

Hands-on projects to improve your skills.

People Also Asked