3.1 使用jQuery实现简单列表的增加、修改、删除

1. 描述：

        点击按钮 ：弹出一个输入框，将输入框的值添加进ul中新创建的li中

        点击修改：弹出一个输入框，将输入框的重新赋值给对应的li的内容

        点击删除：删除对应的整行li

2. HTML

    <ul>
        <li>列表01<span>删除</span><span>修改</span></li>
        <li>列表02<span>删除</span><span>修改</span></li>
        <li>列表03<span>删除</span><span>修改</span></li>
        <li>列表04<span>删除</span><span>修改</span></li>
        <li>列表05<span>删除</span><span>修改</span></li>
    </ul>
    <button>添加</button>

3.CSS

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            text-align: center;
        }

        ul {
            width: 500px;
            line-height: 40px;
            margin: 0 auto;
            text-align: left;
        }

        li {
            overflow: hidden;
            border-bottom: 1px solid green;
        }

        span {
            float: right;
            padding: 2px 5px;
            background: red;
            color: #fff;
            margin-right: 5px;
            line-height: 24px;
            margin-top: 7px;
        }

        li span:nth-child(2) {
            background: green;
        }

        button {
            margin-top: 50px;
            font-size: 25px;
        }
    </style>

4.引入jquery.js文件

<script src="js/jquery.js"></script>

5. 添加点击事件

        5.1 点击按钮：弹出一个输入框，将输入框的值添加进ul中新创建的li中

        /* 
            点击添加按钮 弹出prompt 点击确定 往ul中添加一行li 
        */
        $('button').click(function () {
            // 创建一个变量用于存弹出框的内容
            var txt = prompt('请输入内容');
            if (txt != '' && txt != null) {
                // console.log(txt);
                // 创建一个新节点li，追加到ul的末尾
                var li = '<li>' + txt + '<span>删除</span><span>修改</span></li>';
                $('ul').append(li);
            }
        });

        5.2.1 点击ul，触发源为修改，修改整行li

        // 点击ul，触发源为修改，修改整行li
        $('ul').on('click', 'span:nth-child(2)', function () {
            var txt = prompt('请输入内容');
            if (txt != '' && txt != null) {
                // console.log(this);
                // 修改
                $(this).parent().replaceWith('<li>' + txt + '<span>删除</span><span>修改</span></li>');
            }
        });

        5.2.2

        // 点击ul 事件源为删除按钮，删除span的父节点整行li
        $('ul').on('click', 'span:nth-child(1)', function () {
            $(this).parent().remove();
        });