模擬隊列問題不知道哪出bug了

我的思路是這樣，一個數(shù)組保存隊列，每次進入彈出對數(shù)組操作，然后清空html的隊列元素，再用隊列數(shù)組重新渲染。
求大佬調(diào)試:)
https://codepen.io/xyj/pen/Pe...

html:

    <input type="text" name="" id = "ipt">
    <button id = "ipt_left" onclick = "ipt_left()">左側(cè)入</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]);
    }
}

效果圖：
開始兩個還是好的

然后就開始崩了