How to remove particular div element in JavaScript

In this article, we will talk about how to remove a particular div element by using JavaScript.

There are many ways to remove a specific element. Among them, we will share three methods.

1. Using the removeChild() method.
2. Using outerHTML property.
3. By using the remove() method.

[1] remove div element using removeChild() method. #

The removeChild() method removes a specific child element from its parent element.

function removeDiv(){
    let mainSection = document.querySelector('#main-sec');
    let myDiv = document.querySelector('#my-div');
    mainSection.removeChild(myDiv);
  }

[2] remove particular element using outerHTML property. #

To remove an element using the outerHTML property, we have to set its content to "" (blank).

function removeDiv(){
    let myDiv = document.querySelector('#my-div');
    myDiv.outerHTML = "";
  }

[3] remove specific element using remove() method. #

<div id="my-div">Div element.</div>
<button onclick="removeDiv()">Remove Div</button>
<script>
  function removeDiv(){
    let myDiv = document.querySelector('#my-div');
    myDiv.remove()
  }
</script>