js留言板带删除功能_jsp用application做留言板删除-CSDN博客

本文链接：https://blog.csdn.net/m0_57071129/article/details/118678309

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>

    </ul>
</body>
<script>
//    1.点击发布按钮
//    2.点击后获取到文本域中的内容
//    3.创建了一个li标签
//    4.将文字内容添加到创建的li标签中
//    5.将li插入到ul当中
      var txt=document.querySelector("#txt")
      var btn=document.querySelector("button")
      var ul=document.querySelector("ul")
      

      btn.onclick=function(){       
          var value=txt.value;
         if(value==""){
             alert("请输入内容")
         }else{
            var li=document.createElement("li")
            li.innerHTML=value+"<a href='javascript:;'>删除</a>";
            ul.appendChild(li)    
                //   获取所有的删除标签
            var a=document.querySelectorAll("a")
            // 给删除标签绑定事件
            for(var i=0;i<a.length;i++){
                a[i].onclick=function(){
                    // 获取删除整个内容标签
                    var li=this.parentNode;
                    // 删除内容
                    ul.removeChild(li)
                }
            }
         }
        //  发布内容以后，清空表单中原来的内容
         txt.value=""
         

      }
     
     

</script>
</html>