模拟队列问题不知道哪出bug了

Question

我的思路是这样，一个数组保存队列，每次进入弹出对数组操作，然后清空html的队列元素，再用队列数组重新渲染。求大佬调试:)https://codepen.io/xyj/pen/Pe...html:    <input type="text" name="" id = "ipt">    <button id = "ipt_left" onclick = "ipt_left()">左侧入</button>js:var list = [];function ipt(){    var x = document.getElementById("ipt").value;    return x;}function ipt_left(){    var x = ipt();    list.unshift(x);    remove();    render();}function render(){    for (var i = 0; i < list.length; ++i){        var div = document.createElement('div');        div.className = "item";        div.innerHTML = list[i];        div.style.display = "inline-block";        div.style.backgroundColor = "#e83423";        div.style.margin = "10px";        div.style.width = "50px";        div.style.height = "50px";        div.style.color = "#fff";        div.style.fontSize = "40px";        div.style.textAlign = "center";        document.getElementById("queue").appendChild(div);    }}function remove(){    var divs = document.getElementsByClassName("item");    console.log(divs);    console.log(list);    for (var i = 0; i < divs.length; ++i){        divs[i].parentNode.removeChild(divs[i]);    }}效果图：开始两个还是好的然后就开始崩了

Answer 1

简单看了下，提几个建议：

1. remove函数那里，直接暴力empty清空不就得了么，为什么要循环删除？你循环的时候，divs的length是在变的，但是你的i并没变（一直在加），所以，这个删的是有可能不准的。。。

2. 插前插后可以用Element.insertAdjacentElement()，指定个方向就好，不用每次都清空重构。render也是同样的。

3. div那么多行内样式为啥不写个CSS类出来……

4. input可以考虑下检测下分隔符，然后可以一次插多个元素，这时再for