点击发布，可以发布新的内容，在新内容里有删除键，可以点击删除本行-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_82141420/article/details/145147052

这是一个简单的发布内容和删除内容的案例，它可以实现在文本框内书写，并将内容呈现在文本框下面，一下是它的Html部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .warp {
        width: 300px;
        margin: 100px auto;
      }

      li {
        width: 200px;
        height: 20px;
        background-color: pink;
        margin-top: 10px;
      }
      li a {
        float: right;
      }
    </style>
  </head>

  <body>
    <div class="warp">
      <textarea name="" id="" cols="30" rows="10"></textarea>
      <button>发布</button>
      <ul></ul>
    </div>

上面样式是该代码在浏览器显示的样式

下面是它的JavaScript部分

// 获取页面上的第一个 textarea 元素，用于用户输入待办事项
var textarea = document.querySelector("textarea");
// 获取页面上的第一个 button 元素，用于触发添加待办事项的动作
var btn = document.querySelector("button");
// 获取页面上的第一个 ul 元素，用于展示待办事项列表
var ul = document.querySelector("ul");

// 为按钮添加点击事件处理函数
btn.onclick = function () {
  // 获取 textarea 中的用户输入，并去除前后空格
  var value = textarea.value.trim();
  // 检查用户输入是否非空
  if (value) {
    // 创建一个新的 li 元素用于展示单个待办事项
    var li = document.createElement("li");
    // 设置 li 元素的 HTML 内容，包括待办事项和删除链接
    li.innerHTML = value + '<a href="javascript:;">删除</a>';
    // 将 li 元素添加到 ul 元素中，即待办事项列表中
    ul.appendChild(li);
    // 清空 textarea 的内容，以便用户输入新的待办事项
    textarea.value = "";
  }

  // 重新获取所有删除按钮，因为添加了新的待办事项可能产生了新的删除按钮
  var deleteBtn = document.querySelectorAll("a");
  // 遍历所有删除按钮，为它们添加点击事件处理函数
  for (var i = 0; i < deleteBtn.length; i++) {
    deleteBtn[i].onclick = function () {
      // 获取当前点击的删除按钮的父节点，即对应的 li 元素
      var li = this.parentNode;
      // 获取 li 元素的第一个子元素的 innerHTML，即待办事项内容
      var liCone = li.children[0].innerHTML;
      // 从 ul 中移除当前 li 元素，即从待办事项列表中移除该事项
      li.parentNode.removeChild(li);
    };
  }
}