js留言板留言带批量删除代码

以下是一个简单的JS留言板代码，包含批量删除功能：

HTML代码：

<div id="messages">
  <h3>留言板</h3>
  <ul id="messageList"></ul>
  <form id="messageForm">
    <input type="text" id="name" placeholder="姓名" required/>
    <input type="text" id="message" placeholder="留言" required/>
    <button type="submit">提交</button>
    <button type="button" id="deleteAll">删除全部</button>
  </form>
</div>

JS代码：

// 初始化留言列表
var messageList = document.getElementById("messageList");
var messages = [];

// 添加留言
document.getElementById("messageForm").addEventListener("submit", function(event) {
  event.preventDefault();
  var name = document.getElementById("name").value;
  var message = document.getElementById("message").value;
  messages.push({name: name, message: message});
  renderMessages();
  document.getElementById("name").value = "";
  document.getElementById("message").value = "";
});

// 渲染留言列表
function renderMessages() {
  messageList.innerHTML = "";
  for (var i = 0; i < messages.length; i++) {
    var li = document.createElement("li");
    var name = document.createElement("span");
    var message = document.createElement("span");
    name.innerHTML = messages[i].name + ": ";
    message.innerHTML = messages[i].message;
    li.appendChild(name);
    li.appendChild(message);
    messageList.appendChild(li);
  }
}

// 删除所有留言
document.getElementById("deleteAll").addEventListener("click", function() {
  messages = [];
  renderMessages();
});

// 删除单个留言
messageList.addEventListener("click", function(event) {
  if (event.target.tagName.toLowerCase() === "li") {
    var index = Array.prototype.indexOf.call(messageList.children, event.target);
    messages.splice(index, 1);
    renderMessages();
  }
});

这个代码实现了留言板的基本功能，可以添加留言并且显示在列表中。同时，我们添加了一个“删除全部”按钮来清空留言列表。如果需要删除单个留言，则可以点击留言条目来进行删除。