Jquery 动态添加删除功能

  

1、将Select的选项添加到结果中

$add.on('click', function () {
        $.ajax({
            url: '/Includes/Controls/AssociatedCountrysHandler.ashx',
            data: {
                action_type: 'add-associated-country',
                useraddress_id: userAddressID,
                country_id: $select.val()
            },
            success: function (data) {
                var html='';

                $.each(data, function (i, val) {
                    html += '<li>' + val.CountryName + "<a class='models-delete delete-associate-country' data-id='" + val.CountryID + "' href='#'><img src='/content/images/icon/cross.png' alt='Delete' /></a>" + '</li>';
                })

                $('.associated-country-list').html(html);
            }
        });
        return false;
    });

2、点击‘X’，移除对应内容。

$('.associated-country-td').on('click', '.delete-associate-country', function () {
        var $this = $(this);

        if ($this.hasClass('disabled')) {
            return false;
        }

        if (confirm('Are you sure you wish to remove this item?')) {
            $this.addClass('disabled').prop('disabled', true);

            $.ajax({
                url: '/Includes/Controls/AssociatedCountrysHandler.ashx',
                data: {
                    action_type: 'delete-associated-country',
                    useraddress_id: userAddressID,
                    country_id: $this.data('id')
                },
                success: function (data) {
                    $this.closest("li").fadeOut(function () {
                        $this.remove();
                    });
                }
            });
        }
        return false;
    });

注意：

1、当后台返回的数据为一个数组时，对数组进行遍历的方法：

后台返回数据：

对数组进行遍历：

$.each(data, function (i, val) {
    html += '<li>' + val.CountryName + "<a class='models-delete delete-associate-country' data-id='" + val.CountryID + "' href='#'><img src='/content/images/icon/cross.png' alt='Delete' /></a>" + '</li>';
})

2、注意移除目标时，事件绑定在父类元素上，因为添加目标时对应的部分被刷新，原有的按钮已失效，所以需要绑定在未被刷新的父类元素上，确定删除目标存在于刷新之后的页面中。