How to remove dynamically created div element in JavaScript

Today you will learn how to remove dynamically created div element using JavaScript.

Syntax #

To remove an div element, we can use the removeChild() method.

parentNode.removeChild(element)

So first, we will create a new div element using the createElement() method with an id and append it to a container.

Then, we will select the created div element using the getElementById() method and remove it from its parent element using the removeChild() method.

function createDiv(){
  const divContainer = document.createElement('div');
  divContainer.setAttribute('id', 'xyz');
  divContainer.innerText = 'New div element.';
  document.querySelector('.output').appendChild(divContainer);
}
function removeDiv(){
 const myDiv = document.getElementById('xyz');
 document.querySelector('.output').removeChild(myDiv);
}

<div class="output"></div> <button onclick="createDiv()">Create Div</button> <button onclick="removeDiv()">Remove Div</button> <script> function createDiv(){ const divContainer = document.createElement('div'); divContainer.setAttribute('id', 'xyz'); divContainer.innerText = 'New div element.'; document.querySelector('.output').appendChild(divContainer); } function removeDiv(){ const myDiv = document.getElementById('xyz'); document.querySelector('.output').removeChild(myDiv); } </script> Try it Yourself »