Remove all the children DOM elements in div

Active3 hr before
Viewed126 times

9 Answers


var myDiv = document.getElementById("myDivID");
myDiv.innerHTML = ""; //remove all child elements inside of myDiv
load more v

This approach is simple, but might not be suitable for high-performance applications because it invokes the browser's HTML parser (though browsers may optimize for the case where the value is an empty string).,Electrical Engineering, define a variable using tikz calc ,The clear function is taking the element and using the parent node to replace itself with a copy without it's children. Not much performance gain if the element is sparse but when the element has a bunch of nodes the performance gains are realized.

doFoo.onclick = () => {
   const myNode = document.getElementById("foo");
   myNode.innerHTML = '';
<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
<button id='doFoo'>Remove via innerHTML</button>
load more v

Home » Remove All Child Nodes,First, select the first child node (firstChild) and remove it using the removeChild() method. Once the first child node is removed, the next child node will automatically become the first child node.,Second, repeat the first steps until there is no remaining child node.,The following removeAllChildNodes() function removes all the child nodes of a node:

The following removeAllChildNodes() function removes all the child nodes of a node:

.wp - block - code {
      border: 0;
      padding: 0;

   .wp - block - code > div {
      overflow: auto;

   .shcb - language {
      border: 0;
      clip: rect(1 px, 1 px, 1 px, 1 px); -
      webkit - clip - path: inset(50 % );
      clip - path: inset(50 % );
      height: 1 px;
      margin: -1 px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1 px;
      word - wrap: normal;
      word - break: normal;

   .hljs {
      box - sizing: border - box;

   .hljs.shcb - code - table {
      display: table;
      width: 100 % ;

   .hljs.shcb - code - table > .shcb - loc {
      color: inherit;
      display: table - row;
      width: 100 % ;

   .hljs.shcb - code - table.shcb - loc > span {
      display: table - cell;

   .wp - block - code code.hljs: not(.shcb - wrap - lines) {
      white - space: pre;

   .wp - block - code code.hljs.shcb - wrap - lines {
      white - space: pre - wrap;

   .hljs.shcb - line - numbers {
      border - spacing: 0;
      counter - reset: line;

   .hljs.shcb - line - numbers > .shcb - loc {
      counter - increment: line;

   .hljs.shcb - line - numbers.shcb - loc > span {
      padding - left: 0.75 em;

   .hljs.shcb - line - numbers.shcb - loc::before {
      border - right: 1 px solid #ddd;
      content: counter(line);
      display: table - cell;
      padding: 0 0.75 em;
      text - align: right; -
      webkit - user - select: none; -
      moz - user - select: none; -
      ms - user - select: none;
      user - select: none;
      white - space: nowrap;
      width: 1 % ;

function removeAllChildNodes(parent) {
   while (parent.firstChild) {
Code language: PHP(php)
load more v

Child nodes can be removed from a parent with removeChild(), and a node itself can be removed with remove().Another method to remove all child of a node is to set it’s innerHTML=”” property, it is an empty string which produces the same output. This method is not preferred to use.,Remove all the child elements of a DOM node in JavaScript,How to remove the first character of string in PHP?,How to remove an HTML element using JavaScript ?


Learn how to delete all the nodes inside a div or any node in Javascript.,1 . Set the node innerHTML as empty-string(“”).,3. You can also use node.remove() method to delete the nodes,This method removes all the text and nodes inside the parent node. If you need to delete only the nodes then you can go for second method.

1 . Set the node innerHTML as empty-string(“”).

var node = document.getElementById('parent');
node.innerHTML = "";
load more v

To remove all children from an element:, The Node.removeChild() method removes a child node from the DOM and returns the removed node. ,child is the child node to be removed from the DOM., The removed child node still exists in memory, but is no longer part of the DOM. With the first syntax form shown, you may reuse the removed node later in your code, via the oldChild object reference.

var oldChild = node.removeChild(child);
load more v

To remove child elements, set the innerHTML to ‘’.,Following is the code −,Remove the child node of a specific element in JavaScript?,How to remove all the elements from a set in javascript?

Following is the code −

<!DOCTYPE html>
<html lang="en">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//">
<script src=""></script>
<script src=""></script>
<div id='removeAllChildElements' style="height: 200px; width: 200px; border: 1px solid red;">
<button id='remove'>Remove the items</button>
   remove.onclick = () => {
      const element = document.getElementById("removeAllChildElements");
      element.innerHTML = '';

And I grab the node I want like so:,I have the following HTML:,How could I remove the children of foo so that just <p id="foo"></p> is left?,How would I go about removing all of the child elements of a DOM node in JavaScript?

I have the following HTML:

<p id="foo">

And I grab the node I want like so:

var myNode = document.getElementById("foo");

Could I just do:

myNode.childNodes = new Array();
load more v

Given an item in the DOM, use querySelector() to identify it, like this:, Published Aug 28, 2019, Last Updated Dec 03, 2019 ,then, to remove all its children elements, you have a few different solutions.,The loop ends when all children are removed.

const item = document.querySelector('#itemId')
load more v

Other "children-remove" queries related to "Remove all the children DOM elements in div"