JavaScript DOM
removetakes an element off the page, andremoveChilddoes the same from the parent.
remove is the modern, direct way.
removeChild is older and still very common in existing code.
Example
javascript
document.body.innerHTML = '<p id="demo">Goodbye</p>';
document.getElementById("demo").remove();
console.log(document.querySelectorAll("p").length);The output is 0.
element.remove() removes that element from the page.
parent.removeChild(child) does the same but is called on the parent.
A removed element still exists in memory if a variable is holding it.
Syntax
javascript
element.remove();
parent.removeChild(element);remove needs no reference to the parent.
You will still meet removeChild constantly.
Example
javascript
document.body.innerHTML = '<div id="box"><p id="demo">Text</p></div>';
const child = document.getElementById("demo");
child.parentElement.removeChild(child);
console.log(document.querySelectorAll("p").length);remove() says the same thing in one line.
Setting innerHTML to an empty string empties an element.
Example
javascript
document.body.innerHTML = '<ul id="list"><li>A</li><li>B</li></ul>';
document.getElementById("list").innerHTML = "";
console.log(document.querySelectorAll("li").length);The list element itself is still there, but it is now empty.
querySelectorAll gives a static list, so removing while looping is safe.
Example
javascript
document.body.innerHTML =
'<p class="old">A</p><p class="old">B</p><p>Keep</p>';
document.querySelectorAll(".old").forEach(function (el) {
el.remove();
});
console.log(document.querySelectorAll("p").length);The output is 1.
A removed element can be put back if you kept a reference to it.
Without a reference it is gone for good.
Example
javascript
document.body.innerHTML = '<div id="box"><p id="demo">Text</p></div>';
const p = document.getElementById("demo");
p.remove();
document.getElementById("box").append(p);
console.log(document.querySelectorAll("p").length);It was removed and then added straight back.
remove on an element you already removed does nothing, which is safe.
Calling it on null throws, so check the selector found something.
Example
javascript
document.body.innerHTML = "<p>Only this</p>";
const missing = document.querySelector("#nothing");
if (missing) {
missing.remove();
}
console.log(document.querySelectorAll("p").length);The guard stops a TypeError when nothing matched.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Removing Elements</title>
</head>
<body>
<h1>Removing Elements</h1>
<ul id="list">
<li class="done">Finished</li>
<li>Still to do</li>
<li class="done">Also finished</li>
</ul>
<script>
document.querySelectorAll(".done").forEach(function (item) {
item.remove();
});
</script>
</body>
</html>Run the above example in the Try It Editor.
Try emptying the list:
Replace the loop with list.innerHTML = "" and see everything go.
element.remove() is the direct way to remove an element.parent.removeChild(child) is the older equivalent.innerHTML = "" empties an element without removing it.null before calling remove on a selector result.Removing elements is as common as adding them.
remove covers almost every case in one line.
Remember that removing from the page is not the same as deleting from memory.