首页js简单留言板添加删除的代码

js简单留言板添加删除的代码

时间: 2023-12-23 09:05:21 浏览: 48

以下是一个简单的留言板的添加和删除功能的 JavaScript 代码： ```html <!DOCTYPE html> <html> <head> <title>留言板</title> </head> <body> <h1>留言板</h1>  <form id="message-form"> <label for="name">姓名：</label> <input type="text" id="name" name="name" required><br> <label for="message">留言：</label> <textarea id="message" name="message" required></textarea><br> <input type="submit" value="提交"> </form> <hr>  <ul id="message-list"></ul> <script> // 获取表单元素和消息列表元素 const messageForm = document.getElementById('message-form'); const messageList = document.getElementById('message-list'); // 当表单提交时，添加留言到消息列表 messageForm.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 // 获取表单数据 const name = document.getElementById('name').value; const message = document.getElementById('message').value; // 创建新的留言元素 const li = document.createElement('li'); const text = document.createTextNode(`${name}: ${message}`); li.appendChild(text); // 将留言元素添加到消息列表中 messageList.appendChild(li); // 清空表单数据 messageForm.reset(); }); // 当点击留言时，从消息列表中删除留言 messageList.addEventListener('click', function(event) { if (event.target.nodeName === 'LI') { event.target.remove(); } }); </script> </body> </html> ``` 此代码创建了一个表单，用于提交留言，以及一个列表，用于显示留言。当表单提交时，JavaScript 代码会创建一个新的留言元素，然后将其添加到消息列表中。当点击留言时，JavaScript 代码会从消息列表中删除该留言元素。