Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Remove element by id in JavaScript?
Removing elements by ID is a fundamental DOM manipulation technique in JavaScript. You can remove elements using getElementById() to select the element and remove() to delete it from the page.
JavaScript provides several ways to dynamically modify web page content. Removing elements by their ID is one of the most common operations when creating interactive web applications.
Methods for Removing Elements by ID
There are two main approaches:
Using remove() method (Modern) - Direct element removal
Using removeChild() method (Legacy) - Parent-based removal
Method 1: Using getElementById() and remove()
The getElementById() method selects an element by its ID, and remove() deletes it from the DOM.
Syntax
let element = document.getElementById("elementId");
element.remove();
Example: Removing a Heading
<!DOCTYPE html>
<html>
<body>
<h1 id="heading">Welcome to TutorialsPoint</h1>
<button onclick="removeHeading()">Remove Heading</button>
<script>
function removeHeading() {
let element = document.getElementById("heading");
if (element) {
element.remove();
}
}
</script>
</body>
</html>
Example: Removing an Input Field
<!DOCTYPE html>
<html>
<body>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter username">
<br><br>
<button onclick="removeInput()">Remove Input Field</button>
<script>
function removeInput() {
let inputField = document.getElementById("username");
if (inputField) {
inputField.remove();
}
}
</script>
</body>
</html>
Example: Removing a Complete Section
<!DOCTYPE html>
<html>
<body>
<div id="formSection">
<h3>User Registration</h3>
<input type="text" placeholder="Name"><br><br>
<input type="email" placeholder="Email"><br><br>
<input type="password" placeholder="Password"><br><br>
<button>Register</button>
</div>
<br>
<button onclick="removeSection()">Remove Form Section</button>
<script>
function removeSection() {
let section = document.getElementById("formSection");
if (section) {
section.remove();
}
}
</script>
</body>
</html>
Method 2: Using removeChild() (Legacy Approach)
The older approach requires accessing the parent element first:
<!DOCTYPE html>
<html>
<body>
<div id="container">
<p id="paragraph">This paragraph will be removed</p>
</div>
<button onclick="removeUsingParent()">Remove Using Parent</button>
<script>
function removeUsingParent() {
let element = document.getElementById("paragraph");
if (element) {
element.parentNode.removeChild(element);
}
}
</script>
</body>
</html>
Error Handling
Always check if the element exists before removing it:
<!DOCTYPE html>
<html>
<body>
<p id="message">Click to remove this message</p>
<button onclick="safeRemove()">Remove Message</button>
<script>
function safeRemove() {
let element = document.getElementById("message");
if (element) {
element.remove();
console.log("Element removed successfully");
} else {
console.log("Element not found");
}
}
</script>
</body>
</html>
Comparison
| Method | Browser Support | Syntax Simplicity | Recommended |
|---|---|---|---|
element.remove() |
Modern browsers | Simple | Yes |
parent.removeChild() |
All browsers | Complex | Legacy only |
Conclusion
Use getElementById() followed by remove() for modern browsers. Always check if the element exists before attempting removal to prevent errors.
7K+ Views
