您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
在现代Web开发中，留言板是一个常见的功能，它允许用户在网页上发布留言，并且可以删除自己发布的留言。本文将介绍如何使用JavaScript实现一个简单版的留言发布与删除功能。
首先，我们需要创建一个简单的HTML结构，包含一个输入框用于输入留言内容，一个按钮用于发布留言，以及一个用于显示留言的容器。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单留言板</title>
</head>
<body>
<div id="message-board">
<input type="text" id="message-input" placeholder="请输入留言内容">
<button id="post-btn">发布留言</button>
<ul id="message-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
接下来，我们使用JavaScript来实现留言的发布与删除功能。
首先，我们需要监听发布按钮的点击事件，当用户点击发布按钮时，获取输入框中的内容，并将其添加到留言列表中。
// 获取DOM元素
const messageInput = document.getElementById('message-input');
const postBtn = document.getElementById('post-btn');
const messageList = document.getElementById('message-list');
// 发布留言
postBtn.addEventListener('click', () => {
const messageText = messageInput.value.trim();
if (messageText !== '') {
// 创建新的留言项
const newMessage = document.createElement('li');
newMessage.textContent = messageText;
// 添加删除按钮
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '删除';
deleteBtn.addEventListener('click', () => {
messageList.removeChild(newMessage);
});
newMessage.appendChild(deleteBtn);
messageList.appendChild(newMessage);
// 清空输入框
messageInput.value = '';
}
});
在发布留言时，我们为每条留言添加了一个删除按钮。当用户点击删除按钮时，对应的留言项将从留言列表中移除。
// 删除留言
deleteBtn.addEventListener('click', () => {
messageList.removeChild(newMessage);
});
将上述代码整合到一个JavaScript文件中，命名为script.js，并在HTML文件中引入。
// script.js
const messageInput = document.getElementById('message-input');
const postBtn = document.getElementById('post-btn');
const messageList = document.getElementById('message-list');
postBtn.addEventListener('click', () => {
const messageText = messageInput.value.trim();
if (messageText !== '') {
const newMessage = document.createElement('li');
newMessage.textContent = messageText;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '删除';
deleteBtn.addEventListener('click', () => {
messageList.removeChild(newMessage);
});
newMessage.appendChild(deleteBtn);
messageList.appendChild(newMessage);
messageInput.value = '';
}
});
打开浏览器，输入留言内容并点击“发布留言”按钮，留言将显示在留言列表中。每条留言旁边都有一个“删除”按钮，点击该按钮可以删除对应的留言。
通过以上步骤，我们实现了一个简单的留言发布与删除功能。这个功能虽然简单，但涵盖了JavaScript中DOM操作的基本用法，包括创建元素、添加事件监听器、移除元素等。你可以在此基础上进一步扩展功能，例如添加留言时间、用户昵称等，使其更加完善。
希望本文对你理解如何使用JavaScript实现简单版的留言发布与删除功能有所帮助！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。