js实现添加留言，删除留言

最新推荐文章于 2023-12-12 14:40:14 发布

浪流人

最新推荐文章于 2023-12-12 14:40:14 发布

阅读量269

点赞数 1

分类专栏： WEB 文章标签： html5 html javascript

本文链接：https://blog.csdn.net/rubgh/article/details/120725575

版权

WEB 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

这是一个使用HTML、CSS和JavaScript编写的简单文本编辑器示例。编辑器包括一个文本区域和一个发布按钮。当点击发布按钮时，如果文本区域为空，则会弹出警告；否则，输入的内容将被添加到一个列表中，并且每个列表项都有一个删除链接。点击删除链接可以移除对应的列表项。此代码实现了基本的文本编辑和删除功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>doc</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            padding: 100px;
        }
        textarea{
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }
        ul{
            margin-top: 50px;

        }
        li{
            width: 300px;
            padding: 5px;
            background-color: rgb(245,209,243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
        li 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 (){
        var li=document.createElement('li');
        if(text.value==''){
            alert('您输入的为空');
            return false;
        }
        else{
            li.innerHTML=text.value+"<a href='javascript:'>删除</a>";
            text.value='';
            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>