JavaScript（JS）网页--删除留言

客官°小女子只卖身不卖艺 2022-12-23 06:13 16阅读 0赞

# 删除留言 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

留言板的使用会加大交流，但是对于一些不好的留言或者有错误信息的留言则需要进行删除，在发布留言时，在留言的最末端增加一个删除的链接，点击删除的链接即可删除本条留言。删除留言的操作：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>留言发布</title>
        <style>
            body {
         
                margin: 200px;
            }
            *{
         
                margin: 0px;
                padding: 0px;
            }
            li {
         
                list-style: none;
                width: 200px;
                height: 30px;
                margin-top: 5px;
                border: 1px solid black;
                background-color: pink;
            }
            textarea{
         
                width: 200px;
                height: 80px;
            }  
            a {
         
                float: right;
            }
        </style>
    </head>
    <body>
        <textarea name="" id=""></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.appendChild(li);
                    //添加元素
                    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);
                        }
                    }
                }
                text.value='';
                
            }
    
        </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/98ce64ee02344359a4eee62a0dc1a573.png