动态删除Java脚本中的元素

我使用的是普通的旧Java脚本(没有jQuery或其他)。

我有一个HTML5应用程序，我想要从节元素中删除画布：

<section id="thumbnails">
    <h1>My Bookmarks:</h1>
    <canvas height="60px" width="100px" data-time="2.1167500019073486"></canvas>
    <canvas height="60px" width="100px" data-time="3.60492205619812"></canvas>
    <canvas height="60px" width="100px" data-time="4.558893203735352"></canvas>
    <canvas height="60px" width="100px" data-time="5.411310195922852"></canvas>
</section>

我使用的代码如下：

document.getElementById('videos').addEventListener('change',function(e){
    var canvasElements=document.getElementById('thumbnails').getElementsByTagName('canvas');
    for(var i=0;i<canvasElements.length;i++){
        document.getElementById('thumbnails').removeChild(canvasElements[i]);
        console.log('removed canvas');
    }
},true);

但是，当代码运行时，并不是所有画布都从该部分中删除，我甚至在控制台中看不到日志语句。

转到此页面，获取一些缩略图，然后切换到另一个视频：http://laurent-tonon.com/VideoFinal/

我真的不明白...

感谢大家抽出时间

---

解决方案

问题是getElementsByTagName返回一个动态节点列表，当您删除这些项时，该列表将在您下方更改。您可以通过以相反的顺序处理数组来解决此问题，这样当您删除项目时，nodeList中唯一更改的部分是您已经处理的部分，而不是您仍要处理的部分：

document.getElementById('videos').addEventListener('change',function(e){
    var canvasElements=document.getElementById('thumbnails').getElementsByTagName('canvas');
    for (var i = canvasElements.length - 1; i >= 0; i--) {
        canvasElements[i].parentNode.removeChild(canvasElements[i]);
        console.log('removed canvas');
    }
},true);

像您所做的那样以正向顺序处理它会导致您删除所有其他项目，并留下一半的项目。您可以删除第一个项目。它将从nodeList中删除，将nodeList中的每一项向下移动一个槽。然后将索引前进到[1]，并删除最初的第三项(但现在位于数组的第二个槽中)。最初是第二项的项现在位于数组的第一个插槽中，您永远不会最终将其删除。

颠倒处理nodeList的顺序可以解决该问题，因为从数组中删除的节点位于末尾，并且不会更改您仍要处理的节点的位置。

---

我知道这不是一个jQuery问题，用上面的普通脚本完全可以解决，但就在这样的时候，我被提醒在jQuery中做一些事情是多么容易：

$("#thumbnails canvas").remove();