js实现简单发布删除留言案例(高级版)

最新推荐文章于 2022-06-09 23:19:56 发布

黄大仙No.1

最新推荐文章于 2022-06-09 23:19:56 发布

阅读量590

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_44378358/article/details/107824692

版权

javascript 专栏收录该内容

104 篇文章 9 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        textarea{
            height: 100px;
            border: #6db8ff solid 1px;
        }
        ul {
            padding: 2px 2px;
        }
        ul li{
            color: red;
            width: 300px;
            list-style: none;
            background-color: pink;
            border: 1px solid;
            padding: 5px 0;
            /*margin: 5px 0;*/
        }

        li a{
            float: right;
            text-decoration: none;
        }

        li a:hover{
            color: #e64942;
        }
    </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');
        li.innerHTML = text.value+"<a href='javascript:;'>删除</a>";
        if (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 () {
                this.parentNode.parentNode.removeChild(this.parentNode);
            }
        }
    }
</script>
</body>
</html>

黄大仙No.1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
js实现简单发布删除留言案例(高级版)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> textarea{ height: 100px; border: #6db8ff solid 1px; } ul { .
复制链接

扫一扫

专栏目录