小控件——简单的留言评论删除模块

html

css

        <!-- 留言模块开始了 -->
        <div class="comment w" id= 'five'>
            <div class="headline">留言评论</div>
            <div class="message">
                <textarea name="" id="" cols="30" rows="10"></textarea>
                <input type="button" name="" id="btn" value='评论'>
                <ul></ul>
            </div>
        </div>

/* 6.留言评论模块开始了 */
.comment {
    height: 500px;
}

.message::before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    top:2583px;
    left:0;
    width: 100%;
    height: 500px;
    background: url(../images/pic4.jpg);
    background-size: cover;
    opacity: .4;
}

.comment textarea {
    display: inline-block;
    margin:0px 20px 0;
    width: 60%;
    resize: none;
    outline: none;
    box-shadow: 4px 4px 5px rgba(128,128,128,0.4);
}

#btn {
    border: 1px solid #ccc;
    box-shadow: 4px 4px 5px rgba(128,128,128,0.4);
    background-color: skyblue;
}

.comment ul li {
    margin-left: 20px;
    width: 60%;
    margin-bottom: 5px;
    background-color: rgba(203, 153, 197,0.4);
}
 
.comment ul li a {
    float: right;
}

js:

   // 6.评论模块
    var textarea = document.querySelector('textarea')
    var commentUl = document.querySelector('.comment ul')
    var btn = document.querySelector('#btn')

    btn.addEventListener('click', function () {
        var li = document.createElement('li')
        commentUl.insertBefore(li, commentUl.children[0])
        // 每次点击都要在后面追加内容，所以是+= ，如果是==就会清空之前的内容
        li.innerHTML += textarea.value + '<a href="javascript:;">删除</a>' + '<br>'
        textarea.value = ''
        alert('感谢您精彩的评论')

        // 代码是自上而下执行的，所以要注意事件发生的顺序
        var as = commentUl.querySelectorAll('a')
        // 删除留言
        for (var i = 0; i < as.length; i++) {
            as[i].addEventListener('click', function () {
                alert('您确定删除这条评论吗')
                commentUl.removeChild(this.parentNode)
            })
        }
    })