javascript - 如何从无序列表中删除列表元素？

Question

我正在创建一个可滚动的消息日志来记录回合制格斗游戏的事件历史记录，但我不希望消息日志超过 10 条消息。但是由于某些原因，在多次调用该函数后，它不会从列表中删除第 0 个列表元素(每当计数超过 10 时)。相反，它一直将它们堆叠在列表的底部，将滚动菜单扩展到不合理的长度。我有很多问题:

1. 我该如何解决这个问题/有没有其他方法可以删除列表 来自无序列表的元素......我怀疑这可能是因为我已经 将列表放在“nav”标签内..
2. 是否有创建可滚动消息日志的替代方法？
3. 有没有办法让这个滚动消息日志放置新的 整体在顶部，这样它就可以将历史推到视线之外，因为 反对将新的整体放在列表的底部(出于 视线，除非用户向下滚动)？

谢谢!

HTML:

<nav>
<ul id="battleLog"></ul>
</nav>

JS:

function updateBattleLog(x) {
    var count = count+1;
    var node = document.createElement("LI");
    var textnode = document.createTextNode(x);
    node.appendChild(textnode);
    document.getElementById("battleLog").appendChild(node);



    if (count > 10) {
        var list = document.getElementById("battleLog");
        list.removeChild(list.childNodes[0]);
        count = count-1;
    }
}

Answer 1

那是因为你的 count 变量是局部范围的，你在每次调用函数时将它重新初始化为 1(因此它永远不会到达你的 10 限制)。

试试这个:

var count = 0;

function updateBattleLog(x) {
    count++;

    // ...
}

参见 Fiddle