怎么删除上面的消息

Question

我有一个可用的聊天系统，但是当人们在聊天中发送垃圾邮件时，聊天时间会变长，页面也会变长并且非常卡顿。如何删除顶部的消息？

我的 JavaScript 到目前为止：

let username = "Community Bot";
let chatMsg = ["Hello! Welcome to this game. Please press 'i' for instructions!"];

function appendChatMessage(currentUserName, chatMessage) {
  let chatElem = document.createElement("p");
  chatElem.innerHTML = "<strong>" + currentUserName + ": </strong>" + chatMessage;
  document.querySelector(".chat").appendChild(chatElem);
}

for (let i = 0; i < chatMsg.length; i++) {
  appendChatMessage(username, chatMsg[i])
}

let Game = {
  currentGame: {
    variables: {
      Clicks: 0,
      Increment: 1,
      sendMessage: function(messageContent) {
        chatMsg.push(messageContent);
        appendChatMessage(username, messageContent);
        document.querySelector(".enterT").innerHTML = ""
      }
    }
  }
}

我的 HTML 到目前为止：

<div class="chat">
  <h1>CHAT</h1>
</div>
<div>
  <input class="enterT" type="text" placeholder="Enter A Message..!" /><button
    onclick="Game.currentGame.variables.sendMessage(document.querySelector('.enterT').value)"
  >
    send message
  </button>
</div>

Answer 1

也许将所有消息都放在一个数组中并使用 .pop 或 .shift 删除它们？

Answer 2

您可以查看以下实现

我将 <h1>CHAT</h1> 移出了 <div class="chat"></div>，因为只在 <div class="chat"></div>

中保留了聊天消息

let username = "Community Bot";
let chatMsg = ["Hello! Welcome to this game. Please press 'i' for instructions!"];

function appendChatMessage(currentUserName, chatMessage) {
  let chatElem = document.createElement("p");
  chatElem.innerHTML = "<strong>" + currentUserName + ": </strong>" + chatMessage;
  document.querySelector(".chat").appendChild(chatElem);
  document.querySelector(".enterT").value = ""
}

for (let i = 0; i < chatMsg.length; i++) {
  appendChatMessage(username, chatMsg[i])
}

let Game = {
  currentGame: {
    variables: {
      Clicks: 0,
      Increment: 1,
      sendMessage: function(messageContent) {
        if (!messageContent) {
          return
        }
        chatMsg.push(messageContent);
        appendChatMessage(username, messageContent);
      },
      deleteTopMessage: function() {
        const chatElement = document.querySelector(".chat")
        if (chatElement.children[0]) {
          chatElement.removeChild(chatElement.children[0])
        }
        if (chatMsg.length > 0) {
          chatMsg.shift()
        }
      }
    }
  }
}

<h1>
  CHAT
</h1>
<div class="chat">
</div>
<div>
  <input class="enterT" type="text" placeholder="Enter A Message..!">
  <button onclick="Game.currentGame.variables.sendMessage(document.querySelector('.enterT').value)">send
    message</button>
  <button onclick="Game.currentGame.variables.deleteTopMessage()">delete top message</button>
</div>

怎么删除上面的消息

How do i delete the messages on the top

javascript

chat