动态删除Java脚本中的元素

2022-04-03 00:00:00 javascript html javascript-events

我使用的是普通的旧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();

相关文章