JavaScript DOM

JavaScript Removing Elements

Written by Swapnil RajaPublished 24 Aug 2026

remove takes an element off the page, and removeChild does 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.

Removing Elements

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.

The Older Way

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.

Clearing Everything Inside

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.

Removing Several

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.

It Still Exists in Memory

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.

Removing Something That Is Not There

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>

Try It Yourself

Run the above example in the Try It Editor.

Try emptying the list:

Replace the loop with list.innerHTML = "" and see everything go.

Important Points

element.remove() is the direct way to remove an element.
parent.removeChild(child) is the older equivalent.
innerHTML = "" empties an element without removing it.
A removed element survives in memory if a variable still holds it.
Check for null before calling remove on a selector result.

Conclusion

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.

PreviousJavaScript Inserting Elements NextJavaScript DOM Traversal