简单的留言板(添加和删除)-CFANZ编程社区

简单的留言板(添加和删除)
<style>
    ul {
      list-style: none;
    }

    ul li {
      background-color: pink;
      line-height: 40px;
      margin: 10px;
      width: 300px;
    }

    ul li a {
      color: red;
      float: right;
      text-decoration: none;
    }
  </style>
  <body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul></ul>
  </body>
  <script>
    var btn = document.querySelector("button");
    var text = document.querySelector("textarea");
    var ul = document.querySelector("ul");
    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 as = document.querySelectorAll("a");
        for (var i = 0; i < as.length; i++) {
          as[i].onclick = function () {
            // node.removeChild(child);删除的是li当前a所在的li this.parentNode;
            ul.removeChild(this.parentNode); //删除的是li当前a所在的li
          };
        }
      }
    };
  </script>
0 条评论