JavaScript DOM remove element

Question

I m trying to test if a DOM element exists  and if it does exist delete it  and if it doesn t exist create it   var duskdawnkey   localStorage  duskdawnkey    var iframe   document createElement  iframe    var whereto   document getElementById  debug    var frameid   document getElementById  injected frame    iframe setAttribute  id    injected frame    iframe setAttribute  src    http   google com    iframe setAttribute  width    100     iframe setAttribute  height    400     if  frameid     check and see if iframe is already on page     yes  Remove iframe     iframe removeChild frameid childNodes 0      else    no  Inject iframe       whereto appendChild iframe          add the newly created element and it s content into the DOM     my div   document getElementById  debug        document body insertBefore iframe  my div       Checking if it exists works  creating the element works  but deleting the element doesn t  Basically all this code does is inject an iframe into a webpage by clicking a button  What I would like to happen is if the iframe is already there to delete it  But for some reason I am failing

User · Accepted Answer

removeChild should be invoked on the parent  i e    parent removeChild child     In your example  you should be doing something like   if  frameid        frameid parentNode removeChild frameid

User · Answer

In most browsers  there s a slightly more succinct way of removing an element from the DOM than calling  removeChild element  on its parent  which is to just call element remove    In due course  this will probably become the standard and idiomatic way of removing an element from the DOM   The  remove   method was added to the DOM Living Standard in 2011  commit   and has since been implemented by Chrome  Firefox  Safari  Opera  and Edge  It was not supported in any version of Internet Explorer   If you want to support older browsers  you ll need to shim it  This turns out to be a little irritating  both because nobody seems to have made a all-purpose DOM shim that contains these methods  and because we re not just adding the method to a single prototype  it s a method of ChildNode  which is just an interface defined by the spec and isn t accessible to JavaScript  so we can t add anything to its prototype  So we need to find all the prototypes that inherit from ChildNode and are actually defined in the browser  and add  remove to them   Here s the shim I came up with  which I ve confirmed works in IE 8    function          var typesToPatch     DocumentType    Element    CharacterData            remove   function                     The check here seems pointless  since we re not adding this                method to the prototypes of any any elements that CAN be the                root of the DOM  However  it s required by spec  see point 1 of                https   dom spec whatwg org  dom-childnode-remove  and would                theoretically make a difference if somebody  apply  ed this                method to the DOM s root node  so let s roll with it              if  this parentNode    null                    this parentNode removeChild this                                 for  var i 0  i lt typesToPatch length  i              var type   typesToPatch i           if  window type   amp  amp   window type  prototype remove                window type  prototype remove   remove                          This won t work in IE 7 or lower  since extending DOM prototypes isn t possible before IE 8  I figure  though  that on the verge of 2015 most people needn t care about such things   Once you ve included them shim  you ll be able to remove a DOM element element from the DOM by simply calling  element remove

User · Answer

Seems I don t have enough rep to post a comment  so another answer will have to do   When you unlink a node using removeChild   or by setting the innerHTML property on the parent  you also need to make sure that there is nothing else referencing it otherwise it won t actually be destroyed and will lead to a memory leak  There are lots of ways in which you could have taken a reference to the node before calling removeChild   and you have to make sure those references that have not gone out of scope are explicitly removed   Doug Crockford writes here that event handlers are known a cause of circular references in IE and suggests removing them explicitly as follows before calling removeChild    function purge 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                purge d childNodes i                        And even if you take a lot of precautions you can still get memory leaks in IE as described by Jens-Ingo Farley here   And finally  don t fall into the trap of thinking that Javascript delete is the answer  It seems to be suggested by many  but won t do the job  Here is a great reference on understanding delete by Kangax

User · Answer

Using Node removeChild   does the job for you  simply use something like this   var leftSection   document getElementById  left-section    leftSection parentNode removeChild leftSection     In DOM 4  the remove method applied  but there is a poor browser support according to W3C      The method node remove   is implemented in the DOM 4 specification    But because of poor browser support  you should not use it    But you can use remove method if you using jQuery         left-section   remove      using remove method in jQuery   Also in new frameworks like you can use conditions to remove an element  for example  ngIf in Angular and in React  rendering different views  depends on the conditions

[javascript] JavaScript DOM remove element

Examples related to javascript

Examples related to dom