Remove element by id

Question

When removing an element with standard JavaScript  you must go to its parent first   var element   document getElementById  element-id    element parentNode removeChild element     Having to go to the parent node first seems a bit odd to me  is there a reason JavaScript works like this

User · Answer

This one actually comes from Firefox    for once  IE was ahead of the pack and allowed the removal of an element directly  This is just my assumption  but I believe the reason that you must remove a child through the parent is due to an issue with the way Firefox handled the reference  If you call an object to commit hari-kari directly  then immediately after it dies  you are still holding that reference to it  This has the potential to create several nasty bugs    such as failing to remove it  removing it but keeping references to it that appear valid  or simply a memory leak  I believe that when they realized the issue  the workaround was to remove an element through its parent because when the element is gone  you are now simply holding a reference to the parent   This would stop all that unpleasantness  and  if closing down a tree node by node  for example  would  zip-up  rather nicely  It should be an easily fixable bug  but as with many other things in web programming  the release was probably rushed  leading to this    and by the time the next version came around  enough people were using it that changing this would lead to breaking a bunch of code  Again  all of this is simply my guesswork  I do  however  look forward to the day when web programming finally gets a full spring cleaning  all these strange little idiosyncracies get cleaned up  and everyone starts playing by the same rules  Probably the day after my robot servant sues me for back wages

User · Answer

I know that augmenting native DOM functions isn t always the best or most popular solution  but this works fine for modern browsers   Element prototype remove   function         this parentElement removeChild this     NodeList prototype remove   HTMLCollection prototype remove   function         for var i   this length - 1  i  gt   0  i--            if this i   amp  amp  this i  parentElement                this i  parentElement removeChild this i                        And then you can remove elements like this    document getElementById  my-element   remove      or  document getElementsByClassName  my-elements   remove      Note  this solution doesn t work for IE 7 and below  For more info about extending the DOM read this article   EDIT  Reviewing my answer in 2019  node remove   has come to the rescue and can be used as follows  without the polyfill above    document getElementById  my-element   remove      or      document getElementsByClassName  my-elements    map n   gt  n  amp  amp  n remove       These functions are available in all modern browsers  not IE   Read more on MDN

User · Answer

element remove   The DOM is organized in a tree of nodes  where each node has a value  along with a list of references to its child nodes  So element parentNode removeChild element  mimics exactly what is happening internally  First you go the parent node  then remove the reference to the child node  As of DOM4  a helper function is provided to do the same thing  element remove    This works in 96  of browsers  as of 2020   but not IE 11  If you need to support older browsers  you can   Remove elements via the parent node  as in the question  modify the native DOM functions  as in Johan Dettmar s answer  or use a DOM4 polyfill

User · Answer

Having to go to the parent node first seems a bit odd to me  is there a reason JavaScript works like this    The function name is removeChild    and how is it possible to remove the child when there s no parent       On the other hand  you do not always have to call it as you have shown  element parentNode is only a helper to get the parent node of the given node  If you already know the parent node  you can just use it like this   Ex      Removing a specified element when knowing its parent node var d   document getElementById  top    var d nested   document getElementById  nested    var throwawayNode   d removeChild d nested     https   developer mozilla org en-US docs Web API Node removeChild                                                             To add something more    Some answers have pointed out that instead of using parentNode removeChild child    you can use elem remove     But as I have noticed  there is a difference between the two functions  and it s not mentioned in those answers   If you use removeChild    it will return a reference to the removed node    var removedChild   element parentNode removeChild element    console log removedChild     will print the removed child    But if you use elem remove     it won t return you the reference   var el   document getElementById  Example    var removedChild   el remove      undefined   https   developer mozilla org en-US docs Web API ChildNode remove  This behavior can be observed in Chrome and FF  I believe It s worth noticing     Hope my answer adds some value to the question and will be helpful

User · Answer

From what I understand  removing a node directly does not work in Firefox  only Internet Explorer  So  to support Firefox  you have to go up to the parent to remove it s child   Ref  http   chiragrdarji wordpress com 2007 03 16 removedelete-element-from-page-using-javascript-working-in-firefoxieopera

User · Answer

you can just use element remove

User · Answer

You could make a remove function so that you wouldn t have to think about it every time   function removeElement id        var elem   document getElementById id       return elem parentNode removeChild elem

User · Answer

Functions that use ele parentNode removeChild ele  won t work for elements you ve created but not yet inserted into the HTML   Libraries like jQuery and Prototype wisely use a method like the following to evade that limitation   limbo   document createElement  div    function deleteElement ele        limbo appendChild ele        limbo removeChild ele      I think JavaScript works like that because the DOM s original designers held parent child and previous next navigation as a higher priority than the DHTML modifications that are so popular today  Being able to read from one  lt input type  text  gt  and write to another by relative location in the DOM was useful in the mid-90s  a time when the dynamic generation of entire HTML forms or interactive GUI elements was barely a twinkle in some developer s eye

User · Answer

Shortest  I improve Sai Sunder answer because OP uses ID which allows to avoid getElementById   elementId remove       x000D   x000D  box2 remove                remove BOX 2 x000D   x000D  this  box-3   remove       remove BOX 3  for Id with  minus  character  x000D   lt div id  box1  gt My BOX 1 lt  div gt  x000D   lt div id  box2  gt My BOX 2 lt  div gt  x000D   lt div id  box-3  gt My BOX 3 lt  div gt  x000D   lt div id  box4  gt My BOX 4 lt  div gt  x000D   x000D   x000D

User · Answer

According to DOM level 4 specs  which is the current version in development  there are some new handy mutation methods available  append    prepend    before    after    replace    and remove     https   catalin red removing-an-element-with-plain-javascript-remove-method

User · Answer

It s what the DOM supports  Search that page for  remove  or  delete  and removeChild is the only one that removes a node

User · Answer

For removing one element    var elem   document getElementById  yourid     elem parentElement removeChild elem     For removing all the elements with for example a certain class name    var list   document getElementsByClassName  yourclassname     for var i   list length - 1  0  lt   i  i--   if list i   amp  amp  list i  parentElement   list i  parentElement removeChild list i

User · Answer

You can directly remove that element by using remove   method of DOM   here s an example   let subsWrapper   document getElementById  element id    subsWrapper remove      OR directly  document getElementById  element id   remove

User · Answer

The ChildNode remove   method removes the object from the tree it belongs to   https   developer mozilla org en-US docs Web API ChildNode remove  Here is a fiddle that shows how you can call document getElementById  my-id   remove    https   jsfiddle net 52kp584L       There is no need to extend NodeList  It has been implemented already

User · Answer

Crossbrowser and IE    11   document getElementById  element-id   outerHTML

User · Answer

This is the best function to remove an element without script error   function Remove EId        return EObj document getElementById EId   EObj parentNode removeChild EObj  false      Note to EObj document getElementById EId    This is ONE equal sign not      if element EId exists then the function removes it  otherwise it returns false  not error

User · Answer

You can simply use document getElementById  quot elementID quot   outerHTML  quot  quot    It works in all browsers  even on Internet Explorer

User · Answer

http   javascript crockford com memory leak html    cleans dom element to prevent memory leaks function domPurge d        var a   d attributes  i  l  n      if  a            for  i   a length - 1  i  gt   0  i -  1                n   a i  name              if  typeof d n       function                     d n    null                                    a   d childNodes      if  a            l   a length          for  i   0  i  lt  l  i    1                domPurge d childNodes i                      function domRemove id        var elem   document getElementById id       domPurge elem       return elem parentNode removeChild elem

User · Answer

Having to go to the parent node first seems a bit odd to me  is there   a reason JavaScript works like this    IMHO  The reason for this is the same as I ve seen in other environments  You are performing an action based on your  link  to something  You can t delete it while you re linked to it   Like cutting a tree limb  Sit on the side closest to the tree while cutting or the result will be     unfortunate  although funny

[javascript] Remove element by id

Examples related to javascript

Examples related to dom