Remove an element from DOM with JavaScript/jQuery
This post will discuss how to remove the given element and its descendants from DOM using JavaScript and jQuery.
1. Using jQuery
To remove the specified elements from the DOM, you can use jQuery’s .remove() method. The following example demonstrates its usage by removing the login form from the DOM with the click of the remove button.
jQuery
|
1 2 3 4 5 |
$(document).ready(function() { $('#remove').click(function() { $("#register").remove(); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <body> <form id="register"> <!-- content --> </form> <div class="btn"> <button type="submit" id="remove" class="btn btn-primary">Remove Form</button> </div> </body> </html> |
2. Using JavaScript
In plain JavaScript, you can get the corresponding element using the getElementById() or querySelector() method and then call the native remove() method on it. Following is a simple example demonstrating usage of this method:
JS
|
1 2 3 |
document.getElementById("remove").onclick = function() { document.getElementById("register").remove(); } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <body> <form id="register"> <!-- content --> </form> <div class="btn"> <button type="submit" id="remove" class="btn btn-primary">Remove Form</button> </div> </body> </html> |
Another solution to remove the DOM element is to set the outerHTML attribute of the element to an empty string.
JS
|
1 2 3 |
document.getElementById("remove").onclick = function() { document.getElementById("register").outerHTML = ""; } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <body> <form id="register"> <!-- content --> </form> <div class="btn"> <button type="submit" id="remove" class="btn btn-primary">Remove Form</button> </div> </body> </html> |
Another plausible way is to visit its parent and then remove the element from DOM using the removeChild() method.
JS
|
1 2 3 4 |
document.getElementById("remove").onclick = function() { var node = document.getElementById("register"); node.parentNode.removeChild(node); } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <body> <form id="register"> <!-- content --> </form> <div class="btn"> <button type="submit" id="remove" class="btn btn-primary">Remove Form</button> </div> </body> </html> |
That’s all about removing an element from DOM in JavaScript and jQuery.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)