动态删除JavaScript中的元素

Dynamically remove elements in JavaScript

本文关键字：元素 JavaScript 删除 动态      更新时间：2023-09-26

我使用的是普通的老式JavaScript(没有jQuery或其他)。

我有一个HTML5应用程序，我想从一个section元素中删除画布:

<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，当您删除项目时，它将在您下面更改。你可以通过反向处理数组来解决这个问题，这样当你删除一个项目时，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问题，完全可以用上面的纯javascript解决，但是像这样的时候，我提醒我在jQuery中有些事情是多么容易:

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

既然你已经依靠html5功能的浏览器，为什么不使用一些更新的方法:

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

我认为问题是getElementsByTagName()返回一个活的nodeList，当您删除元素并通过其索引引用它们时，这会导致问题。

试试这个…

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

jsFiddle .

为什么这么复杂?

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 = '';
});

?

相关文章：