001-删除留言案例

最新推荐文章于 2022-10-05 21:22:48 发布

零度碳酸-

最新推荐文章于 2022-10-05 21:22:48 发布

阅读量401

点赞数 1

文章标签： javascript dom js html5 html

本文链接：https://blog.csdn.net/weixin_41086056/article/details/105551300

版权

效果图:

在这里插入图片描述

示例代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</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 {
          // (1) 创建元素
          var li = document.createElement('li')
          // 先有li 才能赋值
          li.innerHTML = text.value + "<a href='javascript:;'>删除</a>"
          // (2) 添加元素
          // ul.appendChild(li);
          ul.insertBefore(li, ul.children[0])
          // (3) 删除元素 删除的是当前链接的li  它的父亲
          var del = document.querySelectorAll('a')
          for (var i = 0; i < del.length; i++) {
            del[i].onclick = function () {
              // node.removeChild(child); 删除的是 li 当前a所在的li  this.parentNode;
              ul.removeChild(this.parentNode)
            }
          }
        }
      }
    </script>
  </body>
</html>

零度碳酸-

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
001-删除留言案例

001-删除留言案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <me...
复制链接

扫一扫