JavaScript, usuwanie elementu <li>

pytanie zadane 15 października 2020 w JavaScript przez Szyszka Gaduła (3,490 p.)

Witam. Mam kod w .cshtml usuwający wiadomości, kiedy jest ich ponad 50. Jednak dzieje się to wyłącznie po wysłaniu jakiegoś żądania, np. GET.:

<body>
    <h1>Siema, @User.Identity.Name</h1>
    <script>
        var user = '@User.Identity.Name';
    </script>
    @if (ChatManager.Messages.ToArray().Length >= 5)
    {
        while (ChatManager.Messages.ToArray().Length != 5)
        {
            ChatManager.Messages.RemoveAt(0);
        }
    }
    <div class="container">
        <div id="chatField">
            <input type="text" id="messageInput" />
            <input type="submit" id="sendButton" value="Wyślij" />
            <ul id="messagesList">
                @foreach (var item in ChatManager.Messages)
                {
                    <li class="Message">@item.User mówi: @item.Message</li>
                }
            </ul>
        </div>
    </div>
    <script src="~/js/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>
</body>

A taki jest kod JS:

connection.on("ReceiveMessage", function (user, message) {
    var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    var encodedMsg = user + " mówi: " + msg;
    var li = document.createElement("li");
    li.setAttribute("style", "font-size: 15px; color: white;");
    li.className = "Message";
    li.textContent = encodedMsg;
    document.getElementById("messagesList").appendChild(li);
});

W jaki sposób w tej funkcji mogę sprawdzać, czy elementów <li> jest więcej niż 50? I w jaki sposób mógł bym w ogóle usunąć konkretne <li> ? Każdemu bym musiał nadawać id? Czy może da się dostać do konkretnego <li> poprzez index w liscie? Jeśli tak, to jak?

2 odpowiedzi

odpowiedź 15 października 2020 przez overcq Pasjonat (21,650 p.)
wybrane 15 października 2020 przez Szyszka

Najlepsza

var elements = document.getElementById( "messageList" ).getElementsByTagName( "LI" );
var count = elements.length;

var removed_node = document.getElementById( "messageList" ).removeChild( elements[0] );