In this article, we are going to learn how can we remove an HTML element using JavaScript. we will be given an HTML element, the task is to remove the HTML element from the document using JavaScript.
These are the following ways to solve this problem:
In this approach, we are removing an element in HTML by the use of the removeChild. 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.
html
<!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>
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>
|
Output:
Remove an HTML element
In this approach, 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.
html
<!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>
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>
|
Output:
Remove an HTML element
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
29 Nov, 2023
Like Article
Save Article