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 insideonclick
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.
- The addEventListener is available in the
eventTarget
interface.
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.