为何动态创建删除元素无法一次性删除？

刚学不久js看教程高了这么一个效果动态添加然后选择批量删除，现在的问题是批量选择LI后如果是连续选择的无法全部最后一个删除，分开选择则可以全部删除
页面地址：http://t.cn/RqPkaEW

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" id="txt" /> <input type="button" id="btn" value="添加" /><input type="button" id="btn2" value="删除" />
    <ul id="c">
        
    </ul>
    <style>
        #c li {padding: 5px 0}
    </style>
    
    <script>
        var t=document.getElementById('txt');
        var btn=document.getElementById('btn');
        var btn2=document.getElementById('btn2');
        var c=document.getElementById('c');
        btn.onclick=function(){
            var li = document.createElement('li');
            li.innerHTML=t.value;
            li.click = false;
            li.onclick = function(){
                if(!li.click){
                    this.style.backgroundColor='#eee';
                }else{
                    this.style.backgroundColor='white';
                }
                
                this.click = !this.click;
            }
            t.value = '';
            var aLi = c.getElementsByTagName('li');
            if(c.children[0]){
                if(aLi.length >=10){
                    c.removeChild(c.lastElementChild);
                }
                c.insertBefore(li,c.children[0]);
            }else{
                c.appendChild(li);
            }
        }
        btn2.onclick=function(){
            var li = c.getElementsByTagName('li');
            for(var i =0;i<li.length;i++){
                if(li[i].click){
                    c.removeChild(li[i]);
                }
            }
        }
    </script>
</body>
</html>

getElementsByTagName返回的是NodeList 是实时的每次removeChild之后 li的length就会变化下一个节点就会变成当前节点

每次removeChild之后加个continue 跳过本次计数就可以了

试试empty()方法

【热门文章】