title: Dynamically remove elements in JavaScript
body: <p>I'm using plain old JavaScript (no jQuery or other).</p>
  <p>I have an HTML5 app where I want to delete canvas from a section element:</p>
  <pre><code>&lt;section id=&quot;thumbnails&quot;&gt;
      &lt;h1&gt;My Bookmarks:&lt;/h1&gt;
      &lt;canvas height=&quot;60px&quot; width=&quot;100px&quot; data-time=&quot;2.1167500019073486&quot;&gt;&lt;/canvas&gt;
      &lt;canvas height=&quot;60px&quot; width=&quot;100px&quot; data-time=&quot;3.60492205619812&quot;&gt;&lt;/canvas&gt;
      &lt;canvas height=&quot;60px&quot; width=&quot;100px&quot; data-time=&quot;4.558893203735352&quot;&gt;&lt;/canvas&gt;
      &lt;canvas height=&quot;60px&quot; width=&quot;100px&quot; data-time=&quot;5.411310195922852&quot;&gt;&lt;/canvas&gt;
  &lt;/section&gt;
  </code></pre>
  <p>The code that I use is the following:</p>
  <pre><code>document.getElementById('videos').addEventListener('change',function(e){
      var canvasElements=document.getElementById('thumbnails').getElementsByTagName('canvas');
      for(var i=0;i&lt;canvasElements.length;i++){
          document.getElementById('thumbnails').removeChild(canvasElements[i]);
          console.log('removed canvas');
      }
  },true);
  </code></pre>
  <p>However when the code runs, not all canvas are removed from that section and I don't even see the log statement in the console.</p>
  <p>Go on this page, take some thumbnails, then switch to another video: <a href="http://laurent-tonon.com/VideoFinal/" rel="nofollow noreferrer">http://laurent-tonon.com/VideoFinal/</a></p>
  <p>I really don't get it...</p>