To remove a DOM element by ID using Javascript, you can get the element by ID and call its remove() method or find the parent DOM node of the element and call its removeChild() method. Following the examples below to understand better.
Remove a DOM element by ID using Javascript
Before removing an element, you need to get it by using the document.querySelector() method or document.getElementById() method. Learn more about how to get an element by ID using Javascript here.
Syntax
document.querySelector()
document.getElementById()Example
<!DOCTYPE html>
<html lang="en" style="font-size: 64px">
<head>
<meta charset="UTF-8" />
<title>Remove a DOM element by ID using Javascript</title>
</head>
<body style="background: greenyellow; padding: 20px">
<div>Hello, welcome to LearnShareIT</div>
<ul id="parent">
<li id="child-1">Child 1</li>
<li id="child-2">Child 2</li>
<li id="child-3">Child 3</li>
</ul>
<script src="index.js"></script>
</body>
</html>let child1Ele = document.querySelector('#child-1');
let child2Ele = document.getElementById('child-2');
child1Ele.style.backgroundColor = 'red';
child2Ele.style.backgroundColor = 'yellow';Output
In this case, using the document.querySelector() method to get an element with id = “child-1”, and document.getElementById() method to get an element with id = “child-2”, then change the background respectively.
remove()
The DOM node has a method called remove(). You can call it to remove an element itself from the DOM tree.
let child1Ele = document.querySelector('#child-1');
child1Ele.remove();Output
In the example above, get an element with id = “child-1” and call the remove() method to remove it from the DOM tree.
parentNode.removeChild()
Using the parentNode property to access the parent node of an element in the tree. The parent node has a method called removeChild() to remove a child node from the DOM and return the removed node.
let child1Ele = document.querySelector('#child-1');
child1Ele.parentNode.removeChild(child1Ele);In this example, get an element with id = “child-1”, find the parent node by using the parentNode property, in this case, it is an element with id = “parent”, then execute the removeChild() method to remove the element from the DOM.
Output
You can also use the removeChild() method to remove all children from an element
let parentEle = document.querySelector('#parent');
while (parentEle.firstChild) {
parentEle.removeChild(parentEle.firstChild);
}Here, get the element with id = “parent”. Loop through all child nodes by checking if the first child node exists, then remove it from the DOM.
outerHTML
The outerHTML property of an element represents the element itself, including its descendants. You can use this property to replace an element with an empty string to remove the element from the DOM.
let child1Ele = document.querySelector('#child-1');
child1Ele.outerHTML = '';Output
In this example, the element with id = “child-1” and all its children will be removed.
Summary
This article is all about how to remove a DOM element by ID using Javascript. You can use any solutions above to work with it, but the remove() method is the standard method we recommend you use because most browsers today already support it. If you have any questions, please feel free to comment below.
Maybe you are interested:
- Remove a class from the Body element using JavaScript
- Get all DOM Elements by its Attribute in JavaScript
- Loop through all DOM elements using JavaScript
My name is Otis Manders, and I like programming and sharing my skills. Java, Javascript, and others are some of my strong programming languages that I can share with everyone. In addition, I have created applications with the React library, HTML, CSS, and Javascript.
Name of the university: UTC
Programming Languages: C, C++,Java, Javascript, Html, Css
