How to Remove an HTML Element Using JavaScript?

JavaScript is a scripting language, and one of the main purposes it was developed was to manipulate the nodes of an HTML document. Manipulating the nodes essentially means manipulating the elements of an HTML document. Thus, removing an element is also a part of manipulating that element.

The most atomic way of removing an element from the HTML webpage is to use the remove() on that element. To apply any method to an HTML element, the user must create a reference to that element inside the JavaScript code.

This article will demonstrate how to remove an element from an HTML document with the help of an example.

The remove() method

The remove method (as mentioned above) is used to remove an element on which it is applied from the HTML document. The syntax of the remove method is as follows:

In this syntax, the elemRef is the reference of the HTML element inside the JavaScript code. This function takes in no parameter, nor does it return anything. Let’s take a look at some examples

Example1 : Removing a an Element Using its Class

Start by creating a new HTML file and place the following lines inside that file:

In these lines, a simple tag is created with the class set to “removeMe”. Running this HTML document displays the following output on the terminal:

The output shows the <p> tag on the screen. The <b> is just a placeholder so that the webpage isn’t empty when the element is removed. After that, simply add a button that will remove the element upon button press and set its onclick value to buttonClicked():

This gives us the following webpage:

The button is added to the webpage, now in the <script> tag add in the following lines:

In the above lines:

• The function buttonClicked() is created, which will be executed upon pressing the remove button
• Inside the function, a reference to the element to be removed is created by using its className
• After that, the remove() method is called on the element to remove it from the HTML document

Execute the code now to get the following results:

As soon as the button is pressed, the element with the className = “removeMe” is removed from the HTML document.

Example 2: Removing an Element Using its ID

Create an HTML document, and just like in example 1, create a p tag and a button, but this time around, give the <p> tag an ID instead of class:

This will give the following output on the browser:

After that, in script file add in the following lines:

In the above lines:

• The function buttonClicked() is created, which will be executed upon pressing the remove button
• Inside the function, a reference to the element to be removed is created by using its ID = “removeMe”
• After that, the remove() method is called on the element to remove it from the HTML document

Running the HTML element and pressing the button creates the following result:

The element with the id as “removeMe” was removed from the HTML document

Conclusion

The remove() method can be applied on an element to remove it from the DOM of the HTML document. However, to apply this method to an element, a reference to the element must first be made. And then, the remove() method is used on that reference of that element using the dot operator. This article has explained the working of the remove() method with examples.