一个简单的留言板

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <input
  11.       type="text"
  12.       onkeydown="addMsg(this)"
  13.       placeholder="请输入留言内容"
  14.       autofocus
  15.     />
  16.     <ul class="list"></ul>
  17.     <script>
  18.       function addMsg(ele) {
  19.         console.log(ele);
  20.         console.log(event);
  21.         if (event.key === "Enter") {
  22.           const ul = document.querySelector(".list");
  23.           if (ele.value.length === 0) {
  24.             alert("can not null");
  25.             ele.focus();
  26.             return false;
  27.           }
  28.           const li = document.createElement("li");
  29.           li.innerHTML =
  30.             ele.value +
  31.             "&nbsp&nbsp&nbsp<button onclick='del(this.parentNode)'>删除</button>";
  32.           //   ul.append(li);
  33.           ul.insertAdjacentElement("afterbegin", li);
  35.           ele.value = null;
  36.           ele.focus();
  37.         }
  38.       }
  40.       function del(ele) {
  41.         // if (confirm("真的要删？")) {
  42.         //   ele.remove();
  43.         //   // ele.outerHTML = null;   //这种方式也可以删除
  44.         // }
  45.         confirm("真的要删除？") ? ele.remove() : false;
  46.       }
  47.     </script>
  48.   </body>
  49. </html>

更多相关文章

  1. sql 存储过程批量删除数据的语句
  2. sql不常用函数总结以及事务，增加，删除触发器
  3. SQL语句删除2条重复数据一条保留一条
  4. 数据库中两张表之间的数据同步增加、删除与更新实现思路
  5. 游标删除多个表里脏数据的方法
  6. SQL 级联删除与级联更新的方法
  7. SQLserver删除某数据库中所有表实现思路
  8. SQL2000中的默认sa帐号的修改与删除方法
  9. SQL Server简单模式下误删除堆表记录恢复方法(绕过页眉校验)

随机推荐

  1. Android中文翻译组 - 简介
  2. Android(安卓)Studio中AspectJ的简单使用
  3. Android(安卓)Design Support Library（2）-
  4. 如何在unity中生成android工程
  5. Android是什么（What is Android）
  6. Android学习笔记之Android安装问题
  7. Android Fragment的增加，删除，添加
  8. Android Studio小技巧
  9. android EditView的一些问题
  10. android RelaLayout