Remove all child elements of a DOM node in JavaScript

Question

How would I go about removing all of the child elements of a DOM node in JavaScript   Say I have the following  ugly  HTML    lt p id  foo  gt       lt span gt hello lt  span gt       lt div gt world lt  div gt   lt  p gt    And I grab the node I want like so   var myNode   document getElementById  foo      How could I remove the children of foo so that just  lt p id  foo  gt  lt  p gt  is left   Could I just do   myNode childNodes   new Array      or should I be using some combination of removeElement   I d like the answer to be straight up DOM  though extra points if you also provide an answer in jQuery along with the DOM-only answer

User · Answer

Generally  JavaScript uses arrays to reference lists of DOM nodes  So  this will work nicely if you have an interest in doing it through the HTMLElements array  Also  worth noting  because I am using an array reference instead of JavaScript proto s this should work in any browser  including IE   while nodeArray length     0      nodeArray 0  parentNode removeChild nodeArray 0

User · Answer

Option 1 A  Clearing innerHTML    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      x000D   x000D  doFoo onclick        gt    x000D    const myNode   document getElementById  foo    x000D    myNode innerHTML       x000D    x000D   lt div id  foo  style  height  100px  width  100px  border  1px solid black   gt  x000D     lt span gt Hello lt  span gt  x000D   lt  div gt  x000D   lt button id  doFoo  gt Remove via innerHTML lt  button gt  x000D   x000D   x000D    Option 1 B  Clearing textContent   As above  but use  textContent  According to MDN this will be faster than innerHTML as browsers won t invoke their HTML parsers and will instead immediately replace all children of the element with a single  text node     x000D   x000D  doFoo onclick        gt    x000D    const myNode   document getElementById  foo    x000D    myNode textContent       x000D    x000D   lt div id  foo  style  height  100px  width  100px  border  1px solid black   gt  x000D     lt span gt Hello lt  span gt  x000D   lt  div gt  x000D   lt button id  doFoo  gt Remove via textContent lt  button gt  x000D   x000D   x000D    Option 2 A  Looping to remove every lastChild    An earlier edit to this answer used firstChild  but this is updated to use lastChild as in computer-science  in general  it s significantly faster to remove the last element of a collection than it is to remove the first element  depending on how the collection is implemented   The loop continues to check for firstChild just in case it s faster to check for firstChild than lastChild  e g  if the element list is implemented as a directed linked-list by the UA      x000D   x000D  doFoo onclick        gt    x000D    const myNode   document getElementById  foo    x000D    while  myNode firstChild    x000D      myNode removeChild myNode lastChild   x000D      x000D    x000D   lt div id  foo  style  height  100px  width  100px  border  1px solid black   gt  x000D     lt span gt Hello lt  span gt  x000D   lt  div gt  x000D   lt button id  doFoo  gt Remove via lastChild-loop lt  button gt  x000D   x000D   x000D    Option 2 B  Looping to remove every lastElementChild    This approach preserves all non-Element  namely  text nodes and  lt  -- comments -- gt    children of the parent  but not their descendants  - and this may be desirable in your application  e g  some templating systems that use inline HTML comments to store template instructions   This approach wasn t used until recent years as Internet Explorer only added support for lastElementChild in IE9     x000D   x000D  doFoo onclick        gt    x000D    const myNode   document getElementById  foo    x000D    while  myNode lastElementChild    x000D      myNode removeChild myNode lastElementChild   x000D      x000D    x000D   lt div id  foo  style  height  100px  width  100px  border  1px solid black   gt  x000D     lt  -- This comment won t be removed -- gt  x000D     lt span gt Hello  lt  -- This comment WILL be removed -- gt  lt  span gt  x000D     lt  -- But this one won t  -- gt  x000D   lt  div gt  x000D   lt button id  doFoo  gt Remove via lastElementChild-loop lt  button gt  x000D   x000D   x000D    Bonus  Element clearChildren monkey-patch    We can add a new method-property to the Element prototype in JavaScript to simplify invoking it to just el clearChildren    where el is any HTML element object    Strictly speaking this is a monkey-patch  not a polyfill  as this is not a standard DOM feature or missing feature  Note that monkey-patching is rightfully discouraged in many situations      x000D   x000D  if  typeof Element prototype clearChildren      undefined      x000D      Object defineProperty Element prototype   clearChildren     x000D        configurable  true  x000D        enumerable  false  x000D        value  function     x000D          while this firstChild  this removeChild this lastChild   x000D          x000D          x000D    x000D   lt div id  foo  style  height  100px  width  100px  border  1px solid black   gt  x000D     lt span gt Hello  lt  -- This comment WILL be removed -- gt  lt  span gt  x000D   lt  div gt  x000D   lt button onclick  this previousElementSibling clearChildren    gt Remove via monkey-patch lt  button gt  x000D   x000D   x000D

User · Answer

Using a range loop feels the most natural to me   for  var child of node childNodes        child remove        According to my measurements in Chrome and Firefox  it is about 1 3x slower  In normal circumstances  this will perhaps not matter

User · Answer

i saw people doing   while  el firstNode        el removeChild el firstNode       then someone said using el lastNode is faster  however I would think that this is the fastest   var children   el childNodes  for  var i children length - 1  i gt -1  i--        el removeNode children i        what do you think   ps  this topic was a life saver for me  my firefox addon got rejected cuz i used innerHTML  Its been a habit for a long time  then i foudn this  and i actually noticed a speed difference  on load the innerhtml took awhile to update  however going by addElement its instant

User · Answer

simply only IE   parentElement removeNode true     true - means to do deep removal - which means that all child are also removed

User · Answer

Simplest way of removing the child nodes of a node via Javascript  var myNode   document getElementById  foo    while myNode hasChildNodes         myNode removeChild myNode lastChild

User · Answer

You can remove all child elements from a container like below  function emptyDom selector    const elem   document querySelector selector    if elem  elem innerHTML    quot  quot      Now you can call the function and pass the selector like below   If element has id   foo  emptyDom   foo      If element has class   foo  emptyDom   foo      if element has tag    lt div gt   emptyDom  div

User · Answer

Here is what I usually do    HTMLElement prototype empty   function         while  this firstChild            this removeChild this firstChild             And voila  later on you can empty any dom element with    anyDom empty

User · Answer

If you want to put something back into that div  the innerHTML is probably better   My example    lt ul gt  lt div id  result  gt  lt  div gt  lt  ul gt    lt script gt    function displayHTML result       var movieLink   document createElement  li        var t   document createTextNode result Title       movieLink appendChild t       outputDiv appendChild movieLink        lt  script gt    If I use the  firstChild or  lastChild method the displayHTML   function doesnt work afterwards  but no problem with the  innerHTML method

User · Answer

var myNode   document getElementById  foo    var fc   myNode firstChild   while  fc         myNode removeChild  fc        fc   myNode firstChild        If there s any chance that you have jQuery affected descendants  then you must use some method that will clean up jQuery data       foo   empty      The jQuery  empty   method will ensure that any data that jQuery associated with elements being removed will be cleaned up   If you simply use DOM methods of removing the children  that data will remain

User · Answer

The fastest     var removeChilds   function  node        var last      while  last   node lastChild  node removeChild last        Thanks to Andrey Lushnikov for his link to jsperf com  cool site     EDIT  to be clear  there is no performance difference in Chrome between firstChild and lastChild   The top answer shows a good solution for performance

User · Answer

The currently accepted answer is wrong about innerHTML being slower  at least in IE and Chrome   as m93a correctly mentioned   Chrome and FF are dramatically faster using this method  which will destroy attached jquery data    var cNode   node cloneNode false   node parentNode replaceChild cNode  node     in a distant second for FF and Chrome  and fastest in IE   node innerHTML         InnerHTML won t destroy your event handlers or break jquery references  it s also recommended as a solution here   https   developer mozilla org en-US docs Web API Element innerHTML   The fastest DOM manipulation method  still slower than the previous two  is the Range removal  but ranges aren t supported until IE9   var range   document createRange    range selectNodeContents node   range deleteContents      The other methods mentioned seem to be comparable  but a lot slower than innerHTML  except for the outlier  jquery  1 1 1 and 3 1 1   which is considerably slower than anything else     node  empty      Evidence here   http   jsperf com innerhtml-vs-removechild 167 http   jsperf com innerhtml-vs-removechild 300  https   jsperf com remove-all-child-elements-of-a-dom-node-in-javascript  New url for jsperf reboot because editing the old url isn t working   Jsperf s  per-test-loop  often gets understood as  per-iteration   and only the first iteration has nodes to remove so the results are meaningless  at time of posting there were tests in this thread set up incorrectly

User · Answer

This is a pure javascript i am not using jQuery but works in all browser even IE and it is verry simple to understand      lt div id  my div  gt       lt p gt Paragraph one lt  p gt       lt p gt Paragraph two lt  p gt       lt p gt Paragraph three lt  p gt      lt  div gt      lt button id   my button gt Remove nodes   lt  button gt      document getElementById  my button   addEventListener  click  function       let parent node  document getElemetById  my div      Div which contains paagraphs      Let find numbers of child inside the div then remove all   for var i  0  i  lt  parent node childNodes length  i             To avoid a problem which may happen if there is no childNodes i        try         if parent node childNodes i             parent node removeChild parent node childNodes i                   catch e                   or you may simpli do this which is a quick way to do  document getElementById  my button   addEventListener  click  function      let parent node  document getElemetById  my div     parent node innerHTML

User · Answer

let el   document querySelector   el     if  el hasChildNodes            el childNodes forEach child   gt  el removeChild child

User · Answer

Ecma6 makes it easy and compact myNode querySelectorAll      forEach  n   gt  n remove       This answers the question  and removes    all child nodes     If there are text nodes belonging to myNode they can   t be selected with CSS selectors  in this case we   ve to apply  also   myNode textContent        Actually the last one could be the fastest and more effective efficient solution   textContent is more efficient than  innerText and  innerHTML  see  MDN

User · Answer

Other ways in jQuery  var foo       foo    foo children   remove      or        foo   remove      or foo html        or foo empty

User · Answer

There are couple of options to achieve that   The fastest      while  node lastChild      node removeChild node lastChild       Alternatives  slower    while  node firstChild      node removeChild node firstChild      while  node hasChildNodes        node removeChild node lastChild       Benchmark with the suggested options

User · Answer

Functional only approach   const domChildren    el    gt  Array from el childNodes  const domRemove    el    gt  el parentNode removeChild el  const domEmpty    el    gt  domChildren el  map domRemove     childNodes  in domChildren will give a nodeList of the immediate children elements  which is empty when none are found  In order to map over the nodeList  domChildren converts it to array  domEmpty maps a function domRemove over all elements which removes it   Example usage   domEmpty document body    removes all children from the body element

User · Answer

If you use jQuery       foo   empty      If you don t   var foo   document getElementById  foo    while  foo firstChild  foo removeChild foo firstChild

User · Answer

innerText is the winner  http   jsperf com innerhtml-vs-removechild 133  At all previous tests inner dom of parent node were deleted at first iteration and then innerHTML or removeChild where applied to empty div

User · Answer

var empty element   function  element         var node   element       while  element hasChildNodes                      selected elem has children          if  node hasChildNodes                        current node has children             node   node lastChild                     set current node to child                   else                                          last child found             console log node nodeName               node   node parentNode                    set node to parent             node removeChild node lastChild           remove last node                     This will remove all nodes within the element

User · Answer

Why aren t we following the simplest method here  remove  looped inside while   const foo   document querySelector   foo    while  foo firstChild      foo firstChild remove              Selecting the parent div Using  remove  Method inside a While loop for eliminating First child element   until there is none left

User · Answer

element textContent         It s like innerText  except standard  It s a bit slower than removeChild    but it s easier to use and won t make much of a performance difference if you don t have too much stuff to delete

User · Answer

The easiest way   let container   document getElementById  containerId    container innerHTML

User · Answer

2020 Update - use the replaceChildren   API  Replacing all children can now be done with the  cross-browser supported  replaceChildren   API  container replaceChildren    arrayOfNewChildren    This will do both  a  remove all existing children  and b  append all of the given new children  in one operation  You can also use this same API to just remove existing children  without replacing them  container replaceChildren     This is fully supported in Chrome Edge 86   Firefox 78   and Safari 14    Note that the MDN data is currently incorrect for Safari   It is fully specified behavior  This is likely to be faster than any other proposed method here  since the removal of old children and addition of new children is done a  without requiring innerHTML  and b  in one step instead of multiple

User · Answer

simple and fast using for loop    var myNode   document getElementById  foo         for var i   myNode childNodes length - 1  i  gt   0  --i          myNode removeChild myNode childNodes i            this will not work in  lt span gt  tag

User · Answer

If you only want to have the node without its children you could also make a copy of it like this   var dupNode   document getElementById  foo   cloneNode false     Depends on what you re trying to achieve

User · Answer

Here s another approach   function removeAllChildren theParent           Create the Range object     var rangeObj   new Range            Select all of theParent s children     rangeObj selectNodeContents theParent           Delete everything that is selected     rangeObj deleteContents

User · Answer

Use modern Javascript  with remove  const parent   document getElementById  quot foo quot   while  parent firstChild        parent firstChild remove      This is a newer way to write node removal in ES5  It is vanilla JS and reads much nicer than relying on parent  All modern browsers are supported  Browser Support - 96  Jun 2020

User · Answer

elm replaceChildren   It s experimental without wide support  but when executed with no params will do what you re asking for  and it s more efficient than looping through each child and removing it  As mentioned already  replacing innerHTML with an empty string will require HTML parsing on the browser s part  Documentation here

User · Answer

with jQuery        foo   find      remove

User · Answer

Just saw someone mention this question in another and thought I would add a method I didn t see yet   function clear el        el parentNode replaceChild el cloneNode false   el      var myNode   document getElementById  foo    clear myNode     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

User · Answer

In response to DanMan  Maarten and Matt  Cloning a node  to set the text is indeed a viable way in my results       param  node  node     return  node  empty node function removeAllChildrenFromNode  node      var shell       do not copy the contents   shell   node cloneNode false      if  node parentNode        node parentNode replaceChild shell  node          return shell        use as such var myNode   document getElementById  foo    myNode   removeAllChildrenFromNode  myNode      Also this works for nodes not in the dom which return null when trying to access the parentNode  In addition  if you need to be safe a node is empty before adding content this is really helpful  Consider the use case underneath       param  node  node     param  string html  content     return  node  node with content only function refreshContent  node  content      var shell       do not copy the contents   shell   node cloneNode false         use innerHTML or you preffered method      depending on what you need   shell innerHTML  content       if  node parentNode        node parentNode replaceChild shell  node          return shell        use as such var myNode   document getElementById  foo    myNode   refreshContent  myNode      I find this method very useful when replacing a string inside an element  if you are not sure what the node will contain  instead of worrying how to clean up the mess  start out fresh

User · Answer

element innerHTML    quot  quot   or  textContent  is by far the fastest solution Most of the answers here are based on flawed tests For example  https   jsperf com innerhtml-vs-removechild 15 This test does not add new children to the element between each iteration  The first iteration will remove the element s contents  and every other iteration will then do nothing  In this case  while  box lastChild  box removeChild box lastChild  was faster because box lastChild was null 99  of the time Here is a proper test  https   jsperf com innerhtml-conspiracy Finally  do not use node parentNode replaceChild node cloneNode false   node   This will replace the node with a copy of itself without its children  However  this does not preserve event listeners and breaks any other references to the node

[javascript] Remove all child elements of a DOM node in JavaScript

Examples related to javascript

Examples related to dom