How to Remove Element By Id in Javascript – Detailed Guide

Published on: | Last updated on: January 4, 2023 | By:

There are multiple ways available to remove elements by id from your webpage.

You can remove element by Id in javascript using the document.getelementbyid("element_id").remove() method.

In this tutorial, you’ll learn how to remove elements by id using different methods and when appropriate to use those methods.

HTML DOM Remove() Method

Webpages are made up of DOM elements.

According to DOM, every HTML tag is an object. The nested HTML tags are children of the parent tags. All these objects form a tree called the DOM object tree, and it’s also called a document.

To remove any DOM element from the tree, you can invoke the remove() method.

Code

node.remove()

Now, let’s see how you can use the remove method differently.

Remove Element By ID Using Javascript Code

ID is the property used to identify the web page elements, and each element has a unique id across the document.

  • Get the element by using its ID
  • Invoke the remove() method in that element.

Code

Use the following code to remove the element with id temp_element from your HTML document.

document.getElementById("temp_element").remove();

This is how you can remove the element by using its id in javascript.

You can use the same method to remove any elements, such as removing divs and removing paragraphs, etc.

Creating a JS Method to Remove

Let’s create a reusable method in javascript that can be called on button clicks or any other events.

Code

function remove(el) {
  el.remove();
}

Let’s use this method as an inline method in your HTML code to remove an element on a button click.

Remove Element By ID in HTML Using Javascript

In this section, you’ll learn how to remove elements by ID in HTML and inline javascript.

  • Create a paragraph element with id element_to_remove_onclick.
  • Create a button and add an on-click action to remove the paragraph element.
  • Call the method remove() method inside onclick

Code

The element with the specified id is removed from the document when you click the button.

<p id="element_to_remove_onclick">This element will be removed on Button Click</p>

<button id="removeBtn" onclick="remove(element_to_remove_onclick)">Click me to remove the element</button>

Remove element By ID Using addEventListener()

In this section, you’ll learn how to remove the element by using the event listener by adding a listener to the onClick event.

The element with a specified ID is removed from the document when you click the button.

Use this method to add multiple event listener(s) to a button and perform various actions on a button click. For example, on click of the button, delete an element and alert the user that the element is deleted.

Code

Use the following code to add an event listener to the button.

removeBtn.addEventListener("click", remove("element_to_remove_onclick"));
  • removeBtn – Button ID
  • "click" – Event when this action must be fired.
  • remove("element_to_remove_onclick") – Action to perform when the event occurs. Here it calls the remove() method that you created earlier in this tutorial.

The element is removed from the document when you click the button.

JSfiddle

This tutorial is available in this JSFiddle Link.

Additional Resources

Leave a Comment