Removing DOM Elements

In the previous lesson, we learned how to create new elements and add them to the page. Now let’s do the opposite and remove elements from the DOM.

🗑️ Removing an Element

The modern way to remove an element is to call remove() directly on it. The element disappears from the page, along with everything inside it.

const message = document.querySelector("#message");
message.remove(); // ✅ gone from the page

Let’s walk through what each line does:

• The first line uses querySelector("#message") to find the element with the id message and stores it in message.
• The second line calls remove() on that element, which takes it off the page entirely.

There is also an older approach where you ask the parent to remove one of its children with removeChild(). This needs a reference to both the parent and the child.

const list = document.querySelector("#list");
const item = document.querySelector("#item");

list.removeChild(item); // older style, same result

Here is how this version works:

• The first line grabs the parent element, the one with the id list.
• The second line grabs the child we want gone, the element with the id item.
• The last line calls removeChild(item) on the parent, telling it to drop that specific child.

Both approaches remove the element from the page. The difference is that remove() works on the element itself, while removeChild() works through the parent.

⚖️ remove() vs removeChild()

These two methods do the same job but work differently. The table below compares them.

🧹 Clearing All Children

To empty an element completely, set its innerHTML to an empty string. This removes every child inside it in one step.

const list = document.querySelector("#list");
list.innerHTML = ""; // ✅ all items inside are gone

Let’s break down these two lines:

• The first line selects the container element with the id list.
• The second line assigns an empty string to its innerHTML, which replaces all of its contents with nothing, wiping out every child at once.

This is handy when you want to rebuild a list from scratch instead of removing items one at a time.

🧪 A Practical Example

Here is a to-do list where each item has a delete button. Clicking a button removes that one item.

const list = document.querySelector("#todo-list");

list.addEventListener("click", (event) => {
  if (event.target.matches(".delete")) {
    const item = event.target.closest("li");
    item.remove(); // ✅ removes just the clicked item's row
  }
});

Let’s step through this example line by line:

• The first line selects the list container with the id todo-list.
• addEventListener("click", ...) listens for any click anywhere inside the list.
• event.target.matches(".delete") checks whether the thing that was clicked is a delete button.
• event.target.closest("li") walks up from the clicked button to the surrounding li and stores it in item.
• item.remove() takes that one list item off the page, leaving the rest untouched.

We will cover how this click handling works in the next lesson on events.

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ element.remove() is the modern, simple way to remove an element
• ✅ parent.removeChild(child) is the older approach and needs the parent
• ✅ Setting innerHTML = "" clears every child inside an element
• ✅ Removing a missing element fails because the selector returned null
• ✅ Use remove() for one item; only clear innerHTML to empty everything

🚀 What’s Next?

Now that you can add and remove elements, let’s make the page respond to the user. Let’s continue to DOM Events.