简单版发布、删除留言案例

摘要：在这个案例中，实现了一个简单的发布留言效果，利用创建节点和添加节点，在点击确定按钮之后，留言显示在下方。

每个留言有一个删除按钮，点击删除按钮后该条留言被删除。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><textarea name="" id="" cols="30" rows="10"></textarea><button class="button1">发布</button><ul></ul>
</body>
<script>var textarea = document.querySelector('textarea');var button1 = document.querySelector('.button1');var ul = document.querySelector('ul');button1.onclick = function () {if (textarea.value == '') {alert('您输入的是空的');} else {var li = document.createElement('li');ul.insertBefore(li, ul.children[0]);li.innerHTML = textarea.value + "<button class='button2'>删除</button>";//外双内单textarea.value = '';var buttons = document.querySelectorAll('.button2');for (var i = 0; i < buttons.length; i++) {buttons[i].onclick = function () {ul.removeChild(this.parentNode);}}}}
</script></html>

简单版发布、删除留言案例相关推荐

案例：简单版发布和删除留言案例
案例:简单版发布和删除留言案例发布留言--案例分析: ① 核心思路: 点击按钮之后,就动态创建一个 li,添加到 ul 里面. ② 创建 li 的同时,把文本域里面的值通过 li.innerHTML ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
JS+jQuery简单版发布、删除留言
首先用户在输入框中输入内容,按下发布按钮,内容到下面的li中,并且清空输入框中的内容下面这个li元素就是后面创建的 <!DOCTYPE html> <html lang=" ...
简单版留言发布+删除留言
因为自己学习有不懂的地方,所以写出来加深印象. <!DOCTYPE html> <html><head><meta charset="utf-8&q ...
Flutter 1.17 | 2020 首个稳定版发布！
作者 / Chris Sells, Product Manager, Flutter developer experience 很高兴为大家带来 Flutter 1.17,这也是我们 2020 年的第 ...
.NET 5.0 RC1 发布，离正式版发布仅剩两个版本，与 netty 相比更具竞争力
原文:http://dwz.win/Qf8 作者:Richard 翻译:精致码农-王亮说明: 1. 本译文并不是完全逐句翻译的,存在部分语句我实在不知道如何翻译或组织就根据个人理解用自己的话表述了. ...
vue 3.0 正式版_Vuejs 3 Release：One Piece. Vuejs 3.0 正式版发布！代号：海贼王
Vuejs 3.0 在北京时间2020年9月19日凌晨,终于发布了 3.0 版本,代号:One Piece.此次vue3.0 为用户提供了全新的 composition-api 以及更小的包大小,和更 ...
野火开发版屏幕_鸿蒙2.0手机开发者版发布，华为多数自研设备明年升级鸿蒙
12月16日,华为在北京举办华为开发者日暨HarmonyOS 2.0手机开发者Beta版发布活动.开发者可访问华为开发者联盟官网,申请获取HarmonyOS 2.0手机开发者Beta版升级. &quo ...
华为HarmonyOS 2.0 手机开发者Beta版发布
12月16日,华为在北京举办华为开发者日暨HarmonyOS 2.0手机开发者Beta版发布活动.华为此次宣布面向手机开发者开放完整的HarmonyOS 2.0系统能力.丰富的API(应用开发接口), ...

简单版发布、删除留言案例

简单版发布、删除留言案例相关推荐

最新文章

热门文章