• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / Using JavaScript to Remove an Element From the DOM

Using JavaScript to Remove an Element From the DOM

August 29, 2022 Leave a Comment

We can use JavaScript to remove an element from the DOM by simply using the remove() method.

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

Let’s say we have the following html:

<div id="div1">This is a div that will remain.</div>
<div id="div2">This is a div that we can Remove with JavaScript.</div>
<div id="div3">This is a div that will remain.</div>

Next, we want to hide the div with id #div2, so we will target the element using the getElementById() method. We will then simply call the remove() method on this div to remove it from the DOM.

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

Let’s put this all together and see the result.

Initial Code:

This is a div that will remain.
This is a div that we can Remove with JavaScript.
This is a div that will remain.

Full Code:

<div id="div1">This is a div that will remain.</div>
<div id="div2">This is a div that we can Remove with JavaScript.</div>
<div id="div3">This is a div that will remain.</div>
</div>

<script>
  document.getElementById("div2").remove();
</script>

Result:

This is a div that will remain.
This is a div that we can Remove with JavaScript.
This is a div that will remain.

Note that when we remove an element from the DOM, we can no longer access that element. So trying to use some code like document.getElementById("div2").style.display = "block"; would do nothing and return an error as the div, #div2 no longer exists in the DOM.

Using JavaScript to Remove an Element From the DOM with a Click

We can use JavaScript to remove a Div very easily by combining the remove() method with an onclick event.

Let’s say that we have the following HTML where we want to give the user the ability to remove a div #div4. The div will just be a greenish box with set dimensions.

Here is the HTML code:


<style>#div4 { width: 300px; height: 200px; background: #7bbfa2; }</style><div>
  <div id="div4"></div>
  <div id="click-me" onclick="removeDiv()">Remove box above</div>
</div>

In the JavaScript code, we will add an onclick event to a button that will run a function we will create. In the function, we will simply call the remove() method on the div which will remove it from the DOM.

Here is the JavaScript code:

function removeDiv(){
  document.getElementById("div4").remove();
};

The final code and output for this example of removing an Element using JavaScript with a click is below:

Code Output:

Remove box above

Full Code:

<style>#div4 { width: 300px; height: 200px; background: #7bbfa2; }</style><div>
  <div id="div4"></div>
  <div id="click-me" onclick="removeDiv()">Remove box above</div>
</div>

<script>

function removeDiv(){
  document.getElementById("div4").remove();
};

</script>

Hopefully this article has been useful for you to understand how to use JavaScript to remove an element from the DOM.

Other Articles You'll Also Like:

  • 1.  Using JavaScript to Get URL Hash
  • 2.  JavaScript Opacity – How to Change the Opacity of an Element Using JavaScript
  • 3.  Using JavaScript to Add Trailing Zeros
  • 4.  How to Use JavaScript to Check if a String is Empty
  • 5.  Using JavaScript to Disable a Button
  • 6.  Using Javascript to Check if Value is Not Null
  • 7.  Using JavaScript to Get a Random Number Between 1 and 100
  • 8.  How to Uncheck All Checkboxes in JavaScript
  • 9.  JavaScript isInteger – How to Check if a Number is an Integer
  • 10.  Grouping By Multiple Properties and Summing Using Javascript

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy