动态删除javascript中的元素

我使用的是普通的老javascript（没有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);

document.getElementById（'videos'）.addEventListener（'change'，函数（e）{
var canvascelements=document.getElementById（'thumbnails'）.getElementsByTagName（'canvas'）；
对于（var i=0；i我认为问题在于返回一个活动的
节点列表
，当您删除元素并通过它们的索引引用它们时，这会导致问题

试试这个

while(canvasElements.length) {
    canvasElements[0].parentNode.removeChild(canvasElements[0]);
    console.log('removed canvas');
}

.
为什么这么复杂？两者都可以吗

document.getElementById('videos').addEventListener('change',function(e){
    var canvasElements=document.getElementById('thumbnails');
    while (canvasElements.hasChildNodes())
    {
        canvasElements.removeChild(canvasElements.lastChild);
    }
});

或者，更简单一点

document.getElementById('videos').addEventListener('change',function(e){
    document.getElementById('thumbnails').innerHTML = '';
});

问题是
getElementsByTagName
返回一个动态节点列表，当您删除项目时，该节点列表将在您下方发生更改。您可以通过按相反顺序处理数组来解决此问题，因此，当您删除项目时，节点列表中唯一更改的部分是您已经处理的部分，而不是您仍然拥有的部分e继续：

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);

像您这样按向前顺序处理它会导致您删除所有其他项目，并留下一半的项目。您删除第一个项目。它会从节点列表中删除，将节点列表中的每个项目向下移动一个插槽。然后将索引提前到[1]，并删除最初的第三个项目（但现在位于阵列的第二个插槽中）。原来是第二个项目的项目现在位于阵列的第一个插槽中，您将永远不会移除它

颠倒处理顺序nodeList可以解决这个问题，因为从数组中移除的节点位于末尾，并且不会改变仍然需要处理的节点的位置


我知道这不是一个jQuery问题，使用上面简单的javascript是完全可以解决的，但在这种情况下，我会想起jQuery中有些事情是多么简单：

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

既然您已经依赖支持html5的浏览器，为什么不使用一些更新的方法：

[].slice.call( document.querySelectorAll( "#thumbnails canvas" ) ).forEach(
    function(v){
    v.parentNode.removeChild(v);
    }
);

canvasElements
将没有
hasChildNodes（）
方法。@alex想详细说明一下吗？请注意，我的变量命名有点混乱，因为我只是简单地复制/粘贴了OP的代码块。
canvasElements
指的是周围的div。这也删除了书签
，而OP的代码并没有尝试这样做。@vzwick:哦，等等，是的，我明白了。这确实起到了作用请原谅我。尽管如此，OP还是希望保留
h1
元素。我是否可以说只要将
移动到元素之外就不会那么麻烦了？