前端案例-26 jQuery元素添加删除，事件绑定

本文链接：https://blog.csdn.net/kathyljq/article/details/116704499

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/jquery.js"></script>
    <title>Document</title>
    <style>
        .wrapper {
            margin: 50px auto;
            width: 800px;
            border: 1px solid black;
            padding: 30px;
        }

        #content {
            margin: 10px;
            width: 600px;
            height: 200px;
            border-style: none;
            border: 1px solid black;

        }

        label,
        button {
            vertical-align: bottom;
            /* margin-bottom: 30px; */
        }

        ul li {
            display: none;
            width: 600px;
            height: 30px;
            list-style: none;
            margin-left: 50px;
            border-bottom: 1px dotted black;
            text-align: left;

        }

        /* span {
            float: left;
        } */

        a {
            float: right;
        }
    </style>
</head>

<body>

    <div class="wrapper">
        <label for="content">微博发布</label>
        <input type="textarea" id="content">
        <button>发布</button>
        <ul>

        </ul>
    </div>

    <script>
        $(function () {
            $('button').on('click', function () {
                // var val = $('#content').val();
                var li = $('<li></li>');
                li.html($('#content').val() + '<a href="javascript:;">删除</a>');
                $('ul').prepend(li);
                li.slideDown();
                $('#content').val('');
            })
            //对动态生成的元素绑定点击事件
            $('ul').on('click', 'a', function () {
                //设置滑动结束后清除回调函数
                $(this).parent().slideUp(function () {
                    $(this).remove();
                });

            });
        })
    </script>
</body>

</html>