本文所用的知识点：创建节点和添加节点

创建节点：document.createElement('li')

添加节点  node(父亲节点).appendChild(child)    child:子节点   追加式添加元素
 
insertBefore：使得插入的元素始终显示在最前面
 
 

<!--

 * @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 留言板(带删除功能)的更多相关文章

  1. 问题：关于一个贴友的js留言板的实现

    需求:用js做一个简单的留言板效果 html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> ...

  2. vue.js使用更简单的方法制作带删除功能的tooolist

    今天复习了下vue.js,先做了个基本版的todolist,做完后自己想加个删除本项的按钮.一开始做没啥头绪了,试了试无果,查了一把后发现网上的那些方法真的是麻烦,自己动手丰衣足食,自己最后换了思路试 ...

  3. JS 留言板案例

    css代码 ul { list-style: none; } ul li { background-color: pink; line-height: 40px; margin: 10px; widt ...

  4. android控件库(1)-带删除功能的EditText

    DJEditText.java /** * Created by xp.chen on 2016/11/25. */ public class DJEditText extends AppCompat ...

  5. JavaScript学习笔记（三）——留言板知操纵DOM节点

    用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...

  6. 35.Android之带删除按钮EditText学习

    今天实现Android里自定义带删除功能的EditText,效果如下: 当输入内容时,EditText变为带有一个删除功能按钮的编辑框,如图: 实现代码很简单,直接上代码, 布局文件xml: < ...

  7. IOS UITableView删除功能

    UITbableView作为列表展示信息,除了展示的功能,有时还会用到删除,比如购物车等.删除功能可以直接使用系统自带的删除功能,当横向轻扫cell时,右侧出现红色的删除按钮,点击删除当前cell. ...

  8. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  9. JS原生编写实现留言板功能

    实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间. <script> window.onload = function(){ var oMessageBox = ...

  10. Vue之简易的留言板功能

    今天我将带大家通过Vue的todolist案例来完成一个简易的网页留言板! LES'T GO! 首先我们需要在页面上搭建一个input文本输入框,并设置提交按钮,通过循环指令来完成输入框的信息提交! ...

随机推荐

  1. Java面试题：请谈谈对ThreadLocal的理解？

    ThreadLocal是一种特殊的变量存储机制,它提供了一种方式,可以在每个线程中保存数据,而不会受到其他线程的影响.这种机制在多线程编程中非常有用,因为它允许每个线程拥有自己的数据副本,从而避免了数 ...

  2. IDEA操作MyBatis实现数据库增删改查

    "感谢您阅读本篇博客!如果您觉得本文对您有所帮助或启发,请不吝点赞和分享给更多的朋友.您的支持是我持续创作的动力,也欢迎留言交流,让我们一起探讨技术,共同成长!谢谢!" 前置环境 ...

  3. 【笔记】go语言--go语言的依赖管理

    [笔记]go语言--go语言的依赖管理 GO语言的依赖管理 依赖的概念,依赖就是第三方的库,即别人已经做好的库 依赖管理的三个阶段 GOPATH,GOVENDOR, go mod 三个阶段 - GOP ...

  4. 力扣287(java&python)-寻找重复数（中等）

    题目: 给定一个包含 n + 1 个整数的数组 nums ,其数字都在 [1, n] 范围内(包括 1 和 n),可知至少存在一个重复的整数. 假设 nums 只有 一个重复的整数 ,返回 这个重复的 ...

  5. Quick Audience 营销活动功能一期上线

    ​简介: 营销活动为Quick Audience(QA)用户洞察下的一个功能模块,通过这个模块,可以将QA侧生成的受众以及营销渠道全部关联起来,从营销活动的视角,一站式完成活动目标制定.活动计划制定到 ...

  6. AI和大数据结合，智能运维平台助力流利说提升核心竞争力

    简介: 简介:本文整理自数智创新行--智能运维专场(上海站),流利说最佳实践演讲:<基于SLS千万级在线教育平台统一监控运营实践> 作者:孙文杰 流利说运维总监元乙 阿里云智能技术专家 优 ...

  7. 获国际架构顶会ATC2021最佳论文！Fuxi2.0去中心化的调度架构详解

    简介: 近日,在国际体系架构顶会USENIX ATC2021上,阿里云飞天伏羲团队与香港中文大学合作的一篇论文<Scaling Large Production Clusters with Pa ...

  8. [FAQ] 夏玉米 按规则查询域名靠谱吗 ?

    很早就有一个网站叫 夏玉米,可以按规则查询和注册域名,那么它真如我们想的那样 可以找到好域名吗? 虽然看起来很好用,实际上夏玉米的查询只是针对它自己的数据库,不包含未在其平台注册的域名,所以大家要失望 ...

  9. dotnet 读 WPF 源代码笔记 为什么自定义的 UserControl 用户控件不能跨程序集继承

    从设计上,用户控件 UserControl 就不是一个合适用来多次继承的类型,更不要说进行跨程序集继承自定义的 UserControl 用户控件.对于大部分的用户控件来说,都是采用组合现有的控件来实现 ...

  10. UCenter 1.6 数据字典

    uc_admins 管理员权限表 字段名 数据类型 默认值 允许非空 自动递增 备注 uid mediumint(8) unsigned   NO 是 用户ID username char(15)   ...