jQuery点击复选框时移除所有动态新增输入Div的实现问题

勾选复选框时无法删除全部动态字段，是代码里的几个错误导致的：

• 动态新增的字段外层容器重复使用了相同idfieldhtml，HTML规范要求id在单页内唯一，jQuery通过id选择器查询时只会返回第一个匹配元素，所以每次仅能删除1个动态字段
• 删除动态字段后没有重置计数器x，后续取消勾选再添加字段时会出现计数错乱，突破最大字段数限制
• 表单禁用状态操作方法有误：用attr/removeAttr处理disabled属性存在兼容问题，应该使用jQuery的prop方法；取消勾选分支里的$("#fieldHTML").removeAttr("disabled")是无效代码，既存在大小写不匹配问题，对应的动态元素此时也已经被移除，无法选中。

• 修改动态字段模板，把重复的id替换为通用class，避免id冲突
• 勾选复选框时，通过class选择器选中所有动态新增字段统一移除，同时将计数器x重置为初始值1
• 所有禁用/启用状态的操作统一使用prop方法，删除无效代码

var maxField = 5; // 输入字段增量上限
var add_button = $('#add_button'); // 添加按钮选择器
var wrapper = $('.field_wrapper'); // 输入字段包裹容器
// 替换原模板的id为class，避免重复id问题
var fieldHTML = '<div class="dynamic-field"><input type="text" name="socials[]" value="" />\
<a href="javascript:void(0);" class="remove_button"><img src="{{ 'remove-icon.png' | asset_url }}"/></a></div>';
var x = 1; // 初始字段计数器值为1

$(function(){
    // 添加按钮点击逻辑
    $(add_button).click(function(){
        if(x < maxField){
            x++; // 计数器递增
            $(wrapper).append(fieldHTML); // 插入新字段
        }
    });

    // 动态字段移除按钮点击逻辑
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); // 移除对应字段
        x--; // 计数器递减
    });

    // 复选框交互逻辑
    $("#chksocials").click(function () {
        if ($(this).is(":checked")) {
            // 禁用添加按钮和原有输入框
            $("#add_button").prop("disabled", true);
            $("#socials").prop("disabled", true);
            // 删除所有动态新增字段
            $(".dynamic-field").remove();
            // 重置计数器为初始值
            x = 1;
        } else {
            // 恢复输入框和添加按钮可用状态
            $("#socials").prop("disabled", false);
            $("#add_button").prop("disabled", false);
            $("#socials").focus();
        }
    });
});

原有HTML结构不需要调整，直接替换对应JS代码即可实现需求。

内容的提问来源于stack exchange，提问作者Shahzad Alam