js 留言板(带删除功能)
本文所用的知识点：创建节点和添加节点
创建节点：document.createElement('li')
添加节点 node(父亲节点).appendChild(child) child:子节点 追加式添加元素
<!--
* @Author: panda
* @Date: 2020-06-15 21:00:37
* @Last Modified by: panda
* @Last Modified time: 2020-06-15 21:00:37
-->
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除留言板案例</title>
<style>
* {
margin:
0;
padding:
0;
} a {
text-decoration: none;
color: #333333;
} a:hover {
text-decoration: underline;
color: #45bcf9;
} .del {
float: right;
} ul,
li {
list-style:
none;
} .wrap {
width:
400px;
margin:
100px auto;
} li {
padding:
5px;
border-bottom:
1px solid #eeeeee;
margin: 5px 0;
font-size: 14px;
line-height: 28px;
} button {
background:
#169fe6;
border:
none;
color:
#ffffff;
padding:
5px 15px;
cursor: pointer;
} button:hover {
background:
#45bcf9;
} textarea {
width:
100%;
padding:
10px;
box-sizing:
border-box;
}
</style>
</head> <body> <div class="wrap">
<div> <textarea name="" id="" cols="30" rows="10"></textarea> </div>
<div> <button>评论</button></div>
<ul></ul>
</div> <script>
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul'); // 注册事件
btn.onclick = function () {
// 判断用户是否输入值
if (text.value == '') {
alert('请输入评论内容！');
return false;
} else {
// 1、创建节点
var li = document.createElement('li');
// 2、将用户输入的值赋添加到li元素中去，使用 innerHTML，再添加一个删除按钮
li.innerHTML = text.value + '<a href = "javascript:;" class = "del">删除</a>';
// 3、添加节点
ul.insertBefore(li, ul.children[0]);
text.value = ''; // 删除操作 node.removeChild(child)
var a = document.querySelectorAll('a');
for (var i = 0; i < a.length; i++) {
a[i].onclick = function () {
// 删除当前a所在的li元素
ul.removeChild(this.parentNode);
}
}
}
}
</script>
</body> </html>
js 留言板(带删除功能)的更多相关文章
- 问题：关于一个贴友的js留言板的实现
需求:用js做一个简单的留言板效果 html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> ...
- vue.js使用更简单的方法制作带删除功能的tooolist
今天复习了下vue.js,先做了个基本版的todolist,做完后自己想加个删除本项的按钮.一开始做没啥头绪了,试了试无果,查了一把后发现网上的那些方法真的是麻烦,自己动手丰衣足食,自己最后换了思路试 ...
- JS 留言板案例
css代码 ul { list-style: none; } ul li { background-color: pink; line-height: 40px; margin: 10px; widt ...
- android控件库(1)-带删除功能的EditText
DJEditText.java /** * Created by xp.chen on 2016/11/25. */ public class DJEditText extends AppCompat ...
- JavaScript学习笔记（三）——留言板知操纵DOM节点
用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...
- 35.Android之带删除按钮EditText学习
今天实现Android里自定义带删除功能的EditText,效果如下: 当输入内容时,EditText变为带有一个删除功能按钮的编辑框,如图: 实现代码很简单,直接上代码, 布局文件xml: < ...
- IOS UITableView删除功能
UITbableView作为列表展示信息,除了展示的功能,有时还会用到删除,比如购物车等.删除功能可以直接使用系统自带的删除功能,当横向轻扫cell时,右侧出现红色的删除按钮,点击删除当前cell. ...
- 原生JS实现简单留言板功能
原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...
- JS原生编写实现留言板功能
实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间. <script> window.onload = function(){ var oMessageBox = ...
- Vue之简易的留言板功能
今天我将带大家通过Vue的todolist案例来完成一个简易的网页留言板! LES'T GO! 首先我们需要在页面上搭建一个input文本输入框,并设置提交按钮,通过循环指令来完成输入框的信息提交! ...
随机推荐
- 顺通鞋业ERP管理系统
鞋业管理软件/鞋业管理系统/鞋业管理云平台 顺通鞋业ERP进销存系统拥有订货管理.销售管理.财务管理.产品管理.库存管理.客户管理.员工管理.查询统计等功能.顺通鞋业ERP进销存系统在管理信息系统业务 ...
- 很强！4.7k star，推荐一款Python工具，可实现自动化操作！！
1.介绍 在日常工作中,肯定会遇到一些重复性的工作,不管是点击某个按钮.写东西,打印东西,还是复制粘贴拷贝资料之类的,需要进行大量的重复操作.按键精灵大家都听说过,传统的方式,大家可以使用按键精灵将操 ...
- HL7简介
HL7是特定于医疗保健的标准组织,其主要重点是创建一组定义的国际消息传递标准,以支持应用程序和设备之间的互操作性和通信.这些消息标准可以分为三个主要的 HL7标准版本,HL7版本2(v2).版本3(v ...
- watch对比computed
总结: computed和watch之间的区别: 1.computed能完成的功能,Watch都可以实现 2.watch能完成的功能,comp ...
- 力扣119(java)-杨辉三角Ⅱ（简单）
题目: 给定一个非负索引 rowIndex,返回「杨辉三角」的第 rowIndex 行. 在「杨辉三角」中,每个数是它左上方和右上方的数的和. 示例 1: 输入: rowIndex = 3输出: [1 ...
- HarmonyOS NEXT应用开发—验证码布局
介绍 本示例介绍如何使用Text组件实现验证码场景,并禁用对内容的选中.复制.光标. 效果图预览 使用说明 单击组件可弹出输入法 在进行验证码输入时,无法对中间单个数字进行更改,无法选中输入内容,无光 ...
- 一种关于低代码平台(LCDP)建设实践与设计思路
简介: 作者在负责菜鸟商业中心CRM系统开发过程中发现有一个痛点:业务线很多,每个业务线对同一个页面都有个性化布局和不同的字段需求,而他所在的团队就3个人,那么在资源有限的情况下该如何支撑呢?本文就降 ...
- RocketMQ 5.0: 存储计算分离新思路
简介: 在阿里云上,RocketMQ 的商业化产品也以弹性云服务的形式为全球数万个用户提供企业级的消息解决方案,被广泛应用于互联网.大数据.移动互联网.物联网等领域的业务场景,成为了业务开发的首选消息 ...
- 如何快速开发 Serverless Devs Package ?
简介:目前,开发者开发 Serverless Package 的流程相对来说是比较简单的.因为在 Serverless Devs 开发者工具中,已经提供了相对完整的脚手架能力,一文了解详情~ 作 ...
- Spring Boot Serverless 实战系列“架构篇” | 光速入门函数计算
简介:如何以 Serverless 的方式运行 Spring Boot 应用? 作者:西流(阿里云函数计算专家) Spring Boot 是基于 Java Spring 框架的套件,它预装了 S ...