模拟队列问题不知道哪出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