jquery实现动态元素的添加与删除

重点：
1.自定义属性解决动态生成元素的删除
2.利用事件委派删除动态生成的元素改变对应checkbox状态
3.注意this的指向问题

    //已选择路线的添加
    //游玩路线
    $('.travel-form>div>div>p input').on('click', function() {
        var choice = $('<a href="javascript:;"></a>');
        choice.attr('myIndex', $(this).index()); //为动态生成的游玩路线添加自定义属性myIndex
        if ($(this).prop("checked")) {
            $('.travel-form>div>div:first-of-type>p').append(choice);
            choice.html($(this).prevAll('span').text() + $(this).val() + '<i>&#xf00d;</i>');
        } else {
            //for循环遍历整个已选择路线里的a标签
            for (var i = 0; i < $('.travel-form>div>div:first-of-type>p>a').length; i++) {
                //判断是否有符合自定义属性的a标签
                if ($('.travel-form>div>div:first-of-type>p>a').eq(i).attr('myIndex') == $(this).index()) {
                    //删除对应a标签
                    $('.travel-form>div>div:first-of-type>p>a').eq(i).remove();
                }
            }
        }
    })

    //以下所有p>a标签结构
    $('.travel-form>div>div:nth-of-type(n+2)>p').on('click', 'a', function() {
        var choiceA = $('<a href="javascript:;"></a>');
        $('.travel-form>div>div:first-of-type>p').append(choiceA);
        choiceA.html($(this).prevAll('span').text() + $(this).text() + '<i>&#xf00d;</i>');
    })

    //已选择路线的删除
    $('.travel-form>div>div:first-of-type>p').on('click', 'i', function() {
        $(this).parent().fadeOut(function() { //回调函数(淡出效果)
            $(this).remove(); //这里的this指的是a标签了
        });
        //for循环遍历input元素
        for (var i = 0; i < $('.travel-form>div>div>p input').length; i++) {
            //判断input的index属性是否与动态生成的a标签自定义属性myIndex相等
            if ($('.travel-form>div>div>p input').eq(i).index() == Number($(this).parent().attr('myIndex'))) {//这里注意需要转换为数字类型
                //符合条件则修改input框的checked值为false
                $('.travel-form>div>div>p input').eq(i).prop('checked', false);
            }
        }
    })

标签：jquery,删除,form,travel,添加,input,div,type,first
来源： https://blog.csdn.net/Y1_1Y1_1y1_1y/article/details/121434972