Removing HTML Elements Using JavaScript Methods

To remove DOM elements in JavaScript, you have two direct methods: remove for self-deletion and removeChild for parent-based removal, plus a third technique for clearing all children from a container in one step. This is how you clean up a page, delete items, close panels, and clear old content.

javascript

const banner = document.querySelector("#promo-banner");
banner.remove();

The banner element is gone from the page. One line, no parent reference needed. The remove method is the simplest way to delete an element you have a reference to.

element.remove: Self-Deletion

The remove method is called directly on the element you want to delete. It detaches the element from its parent and removes it from the DOM tree entirely.

javascript

const notification = document.querySelector(".notification");
notification.remove();

If the element does not exist, calling remove on null throws an error. Always guard with a check when the element might not be on the page:

javascript

const modal = document.querySelector("#modal");
 
if (modal) {
  modal.remove();
}

The remove method is supported in all modern browsers. It was added to the DOM specification in 2015 and is now the standard way to delete an element from JavaScript.

parent.removeChild: Deleting a Known Child

removeChild is called on the parent element. You pass the child you want to delete. This method has been in the DOM since the beginning and works in every browser.

javascript

const list = document.querySelector("#items");
const firstItem = list.firstElementChild;
 
if (firstItem) {
  list.removeChild(firstItem);
}

The first item in the list is removed. The remaining items shift up to fill the gap. removeChild is useful when you have a reference to the parent and know which child position to target, for example, when implementing a delete button on each list item.

Clearing All Children from a Container

To delete everything inside a container, the fastest approach is to replace its content with an empty string. Both textContent and innerHTML work, but textContent is faster because it skips HTML parsing.

javascript

const results = document.querySelector("#search-results");
results.textContent = "";

Every child element, text node, and event listener inside the container is gone. The container itself remains in the DOM, empty and ready for new content.

An alternative is to loop and call removeChild repeatedly, but this is slower for large containers because each removal triggers a DOM update. Setting textContent or innerHTML to an empty string does one update.

Removing Multiple Elements by Condition

To remove a subset of elements that match a condition, combine querySelectorAll with forEach and remove:

javascript

const completedItems = document.querySelectorAll(".completed");
 
completedItems.forEach((item) => {
  item.remove();
});

Every element with the class "completed" is removed from the page. The querySelectorAll NodeList is static, so the loop is not affected by the elements being removed during iteration.

Where to Go Next

Now that you can remove elements, learn how to create new elements and append them to the DOM. Together these three operations, create, append, remove, are the foundation of all dynamic page content.