简单版留言发布+删除留言

因为自己学习有不懂的地方,所以写出来加深印象。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>demo</title><style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none;}ul {margin-top: 50px;}li {width: 300px;padding: 5px;background-color: rgb(245, 209, 243);color: red;font-size: 14px;margin: 15px 0;}li a {float: right;} </style></head><body><textarea name="" id=""></textarea><button>发布</button><ul></ul><script >//1.获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');//2.注册事件btn.onclick = function() {if (text.value == '') {alert('输入内容不能为空！！！请您重新输入~~');return false;} else {console.log(text.value);//(1)创建元素var li = document.createElement('li');//先有元素才能赋值li.innerHTML = text.value + '<a href="javascript:;">删除</a>';//(2)添加元素//ul.appendChild(li);//ul.children[0]元素 之前进行添加li元素                    ul.insertBefore(li, ul.children[0]);//删除元素  删除的是当前a链接的父亲 li//获取所有的a元素var del = document.querySelectorAll('a');for (var i = 0; i < del.length; i++) {del[i].onclick = function() {ul.removeChild(this.parentNode); //this.parentNode当前a元素的父节点 即为当前li  这里的this指代的是del[i]}}}}</script></body>
</html>

简单版留言发布+删除留言相关推荐

本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
留言板留言与删除留言的实现
留言板是一种可以用来记录,展示文字信息的载体,有比较强的时效性. 留言板思路:用户要进行留言,就需要留言的文本域,用来给用户编辑留言: 当用户编辑完留言,就需要提交留言,这个时候就需要给用户提供存放留 ...
java留言系统_JAVA留言板系统.doc
留言板系统 1.1留言板系统功能简介 1.留言板系统的主要功能: @注册模块:用户填写相应信息,进行注册,只有注册后,用户才有访问留言板的权利 @登录模块:用户的身份验证功能 @登录信息模块:用户查看 ...
案例：简单版发布和删除留言案例
案例:简单版发布和删除留言案例发布留言--案例分析: ① 核心思路: 点击按钮之后,就动态创建一个 li,添加到 ul 里面. ② 创建 li 的同时,把文本域里面的值通过 li.innerHTML ...
简单版发布、删除留言案例
摘要:在这个案例中,实现了一个简单的发布留言效果,利用创建节点和添加节点,在点击确定按钮之后,留言显示在下方. 每个留言有一个删除按钮,点击删除按钮后该条留言被删除. <!DOCTYPE htm ...
JS+jQuery简单版发布、删除留言
首先用户在输入框中输入内容,按下发布按钮,内容到下面的li中,并且清空输入框中的内容下面这个li元素就是后面创建的 <!DOCTYPE html> <html lang=" ...
小控件——简单的留言评论删除模块
html css <div class="comment w" id= 'five'><div class=" ...
评论留言用html怎么做,利用JS实现评论留言发布表单代码
特效描述:利用JS实现评论留言发布表单代码.利用JS实现评论留言发布表单代码代码结构 1. HTML代码来,说说你在做什么,想什么... 请点击发布试试吧请填写内容后再发布! window. ...
微信小程序「柒留言」 — 无留言公众号开通微信公众号留言功能（建议收藏）
「柒留言」小程序留言助手使用指南(接近原生界面) 前言从去年 3 月以后新公众号就没得留言功能了,新申请的微信公众号没有留言功能,没有留言就无法跟读者进行互动,写出去的文章得不到反馈,着实感觉有蛮难 ...

简单版留言发布+删除留言

简单版留言发布+删除留言相关推荐

最新文章

热门文章