JQ实现列表增删以及上下移动

HTML

 <div class="box">
        <ul>
            <li class="list-option">
                <input class="list-input" type="text" value="HTML+CSS">
                <span class="list-btn">
                    <span class="list-up">[上移]</span>
                    <span class="list-down">[下移]</span>
                    <span class="list-del">[删除]</span>
                </span>
            </li>
            <li class="list-option">
                <input class="list-input" type="text" value="JavaScript">
                <span class="list-btn">
                    <span class="list-up">[上移]</span>
                    <span class="list-down">[下移]</span>
                    <span class="list-del">[删除]</span>
                </span>
            </li>
            <li class="list-option">
                <input class="list-input" type="text" value="c">
                <span class="list-btn">
                    <span class="list-up">[上移]</span>
                    <span class="list-down">[下移]</span>
                    <span class="list-del">[删除]</span>
                </span>
            </li>

        </ul>
        <div class="box-bottom">
            <span class="list-add">添加项目</span>
            <div class=" list-hide">
                添加到列表：
                <input class="list-add-input" type="text">
                <input id="bt1" type="button" value="添加">
                <input id="bt2" type="button" value="取消">
            </div>
        </div>
    </div>

CSS

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

        .box {
            width: 350px;
            padding: 20px 50px;
            margin: 100px auto;

            background-color: rgb(211, 214, 14);
        }

        .list-option {
            margin: 10px 0;
        }

        .list-up,
        .list-down,
        .list-del,
        .list-add {
            cursor: pointer;
            font-size: 14px;
            color: rgb(102, 101, 101);
        }

        .list-up:hover,
        .list-down:hover,
        .list-del:hover,
        .list-add:hover {
            color: rgb(235, 150, 38);
        }

        .list-add::before {
            content: '+';
            font-weight: 800;
        }

        .list-hide {
            display: none;
        }

        #bt1,
        #bt2 {
            cursor: pointer;
        }

JQ

$(function () {
            //出现项目窗事件
            $('.list-add').click(function () {
                $('.list-hide').show();
            });
            //取消按钮单击隐藏项目窗事件
            $('#bt2').click(function () {
                $('.list-hide').hide();
            });
            //单击添加按钮添加项目节点事件
            $('#bt1').click(function () {
                $('.list-option:first').clone(true).appendTo($('.box>ul'));// 复制第一个li并添加进去
                var $vaule = $('.list-add-input').val();//获取添加项中在input输入的value
                $('.list-input:last').attr('value', $vaule);//修改添加进列表中的input的value
            });
            //删除li事件
            $('.list-del').click(function () {
                $(this).parents('li').remove();
                //因为前面添加节点用的是克隆节点在添加，所以不能实现删除完节点后在添加，不然复制不了节点。
            });
            //上移事件
            $('.list-up').click(function () {
                var $li = $(this).parents('li');//获取当前节点li
                $li.prev().before($li);//把前面一个的节点插入到当前节点的前面（之前一直理解为在当前节点前面再添加一个节点）
            });
            //下移事件
            $('.list-down').click(function () {
                var $li = $(this).parents('li');
                $li.next().after($li);
            });
        });

需要注意的是添加插入节点append相关方法， 这个是新增新元素才会添加，
如果append一个存在的元素只是交换下节点位置.
就比如

var $li = $(this).parents('li');
$li.prev().before($li);

$li已经是存在的节点，我一开始以为它的效果图是这样

从0点想到2点…后面才发现，这个添加在上一个节点before前面的，就是相当于是把存在的节点提上去的意思。最后小丑还是我自己.

正确的效果图