删除留言信息-CSDN博客

本文链接：https://blog.csdn.net/2203_75540936/article/details/134128955

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            text-decoration: none;
            list-style: none;
        }
        li{
            display: block;
            width: 300px;
            height: 100%;
            text-align: left;
            border-left:solid #eee 10px;
            background-color: #eee;
        }
        li a{
            float :right;
        }
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    
    <ul>
         
    </ul>
    <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{
                var li = document.createElement('li');
                li.innerHTML=text.value+"<a href='javascript:;'>删除</a>"
                ul.insertBefore(li, ul.children[0]);
                var as=document.querySelectorAll('a');
                for(var i=0;i<as.length;i++){
                    as[i].onclick=function(){
                        ul.removeChild(this.parentNode)
                    }
                }
            }
        }
    </script>
</body>
</html>