Remove HTML Element From DOM in JavaScript

Learn how to remove an HTML Element from DOM in JavaScript using:

• remove()
• removeChild()
• replaceChildren()

1. Remove HTML Element Using remove()

The remove() method lets you remove any element by its DOM reference.

Get a DOM reference of an HTML element that you want to remove from the HTML page and call remove() on it.

Let’s see that in action.

Here is a simple HTML Markup.

<section id="box-wrapper">
  <div class="box">div <br>1</div>
  <div class="box">div <br>2</div>
  <div class="box orange">div <br>3</div>
  <div class="box">div <br>4</div>
  <div class="box">div <br>5</div>
</section>

Let’s remove the orange box using the remove() method.

First, get DOM references of all the div elements that have box classes in them by calling the getElementsByClassName() method on the document object.

This will return HTMLCollection which is an array like object.

Assign it to the constant boxes.

Get the orange box by its index value, which is 2 in this case.

Finally, call the remove() method on the div element object which will remove itself from the DOM hierarchy.

const boxes = document.getElementsByClassName("box");
boxes[2].remove(); 

Removing the HTML element by index number is not always ideal.

Sometimes, you will need to remove the orange box dynamically.

Luckily, we can iterate over the HTMLCollection object using for..of loop.

Then, find which element has the orange class in it and remove it.

for(box of boxes) {
  if(box.classList.contains("orange")) {
    box.remove();
  }
}

Try it out

See the Pen JavaScript Remove Element by SoftAuthor (@softauthor) on CodePen.

2. Remove Child HTML Element Using removeChild()

The removeChild() method lets you remove any child HTML element by its parent.

First, get a DOM reference of a parent element (section#box-wrapper) by calling the getElementById() method on the document object.

const boxWrapper = document.getElementById("box-wrapper");
const orangeBox = boxWrapper.getElementsByClassName("box")[2];
boxWrapper.removeChild(orangeBox); 

Then, get the DOM reference of the orangeBox that we want to remove.

Finally, call the removeChild() method on the parent element object, which is boxWrapper, by passing orangeBox child element as an argument.

Try it out

See the Pen JavaScript Remove Element Using remove() #2 by SoftAuthor (@softauthor) on CodePen.

3. Remove All Child HTML Elements Using replaceChildren()

The replaceChildren() method allows you to remove all the child elements of a specific parent element.

Get a DOM reference of a parent element that you want to remove all the children from.

const boxWrapper = document.getElementById("box-wrapper");
boxWrapper.replaceChildren();

Then, invoke the replaceChildren() method on the parent element object (boxWrapper) which gets rid of all the child elements inside.

Try it out

See the Pen JavaScript Remove All Child Elements Using replaceChildren() #3 by SoftAuthor (@softauthor) on CodePen.

4. Remove An Attribute Using removeAttribute()

Learn how to remove an attribute of an HTML element using removeAttribute() method.

Get a DOM reference of all the div elements that have box class in them and store it in the boxes constant.

const boxes = document.getElementsByClassName("box");
boxes[2].removeAttribute("class"); 

Call the removeAttribute() on the HTML element that has an orange class in it using its index value 2.

Then, pass the attribute name that you want to get rid of.

In this case: class.

As you can see, the removeAttribute() will get rid of all the classes attached to box 3.

What if we want to remove just the orange class but keep the box class.

We can easily do this by calling the remove() method on classList which will only remove the class names that are specified in the argument.

In this case: orange

boxes[2].classList.remove("orange"); 

Try it out

See the Pen JavaScript Remove Attribute From An Element #4 by SoftAuthor (@softauthor) on CodePen.