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
Selected Reading
Remove and add new HTML Tags with JavaScript?
JavaScript provides several methods to dynamically remove and add HTML elements to the DOM. You can hide/show existing elements or completely remove/create new elements using vanilla JavaScript or jQuery.
Method 1: Using jQuery hide() and show()
The simplest approach is using jQuery's hide() and show() methods to toggle element visibility:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide/Show Elements</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Test JavaScript</h1>
<p>This content can be hidden and shown.</p>
<button type="button" id="hide">Hide Content</button>
<button type="button" id="show">Show Content</button>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("h1, p").hide();
});
$("#show").click(function(){
$("h1, p").show();
});
});
</script>
</body>
</html>
Method 2: Using Vanilla JavaScript DOM Manipulation
You can also accomplish this using pure JavaScript without jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Manipulation</title>
</head>
<body>
<h1 id="heading">Dynamic Content</h1>
<p id="paragraph">This paragraph can be removed and added back.</p>
<button onclick="hideElements()">Hide Elements</button>
<button onclick="showElements()">Show Elements</button>
<script>
function hideElements() {
document.getElementById('heading').style.display = 'none';
document.getElementById('paragraph').style.display = 'none';
}
function showElements() {
document.getElementById('heading').style.display = 'block';
document.getElementById('paragraph').style.display = 'block';
}
</script>
</body>
</html>
Method 3: Actually Removing and Adding DOM Elements
For truly removing and recreating elements (not just hiding), use removeChild() and createElement():
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add/Remove Elements</title>
</head>
<body>
<div id="container">
<h2 id="dynamicHeading">This heading can be removed</h2>
</div>
<button onclick="removeElement()">Remove Heading</button>
<button onclick="addElement()">Add Heading Back</button>
<script>
let removedElement = null;
function removeElement() {
const element = document.getElementById('dynamicHeading');
if (element) {
removedElement = element;
element.parentNode.removeChild(element);
}
}
function addElement() {
if (removedElement) {
document.getElementById('container').appendChild(removedElement);
removedElement = null;
} else {
const newHeading = document.createElement('h2');
newHeading.id = 'dynamicHeading';
newHeading.textContent = 'This heading can be removed';
document.getElementById('container').appendChild(newHeading);
}
}
</script>
</body>
</html>
Comparison of Methods
| Method | Library Required | Element Preservation | Performance |
|---|---|---|---|
| jQuery hide()/show() | Yes | Elements remain in DOM | Good |
| JavaScript display style | No | Elements remain in DOM | Best |
| Remove/Create elements | No | Elements removed from DOM | Good for memory |
Conclusion
Use jQuery's hide()/show() for simple visibility toggling, vanilla JavaScript for better performance, or DOM removal/creation when you need to completely manage element lifecycle. Choose based on your specific requirements and whether you're already using jQuery.
Updated on: 2026-03-15T23:18:59+05:30
801 Views
Advertisements