JQuery复选框取消勾选事件后无法移除对应元素问题求助

嘿，我帮你排查了代码里的几个问题，咱们一步步修正：

问题点分析 #

1. 重复绑定事件：你每次勾选复选框时都会重新绑定#remove的点击事件，这会导致同一个按钮被点击时触发多次操作，完全没必要。
2. 选择器错误：取消勾选分支里的$("#locCounty span #"+checked)多了空格，正确的选择器应该是$("#locCounty span#"+checked)（因为span本身的id就是checked），而且你只是隐藏了按钮，没有移除整个筛选项。
3. 状态不同步：取消勾选时没有从tmp数组中移除对应项，导致数组内容和实际选中状态不一致。
4. 重复ID问题：多个<p>用了同一个id="remove"，违反HTML规范（ID必须唯一），会导致选择器失效。

修正后的代码 #

//Update Current Filters by COUNTY - STARTS 
$(document).ready(function () { 
    var tmp = []; 

    // 只绑定一次移除按钮的点击事件
    $(document).on('click', '.county-filter-item input[type=button]', function () { 
        const spanId = $(this).parent('span').attr('id');
        // 移除整个筛选项的p元素
        $(this).closest('p').remove();
        // 同步更新tmp数组
        tmp = tmp.filter(item => item !== spanId);
        // 同步取消对应的复选框勾选状态
        $("#" + spanId).prop('checked', false);
    });

    $("#selCounty").on('change', '[type=checkbox]', function () { 
        const checkedId = $(this).attr('id'); 
        if ($(this).is(':checked')) { 
            tmp.push(checkedId); 
            console.log('当前选中的County:', tmp); 
            // 用class代替重复ID，用模板字符串拼接HTML更清晰
            $("#locCounty").append(`<p class="county-filter-item" style="display:inline; float:left"><span id="${checkedId}">${checkedId}<input type="button" value="X"></input></span></p>`); 
        } else { 
            // 找到对应的筛选项并移除
            $("#locCounty span#" + checkedId).closest('p').remove();
            // 同步更新tmp数组
            tmp = tmp.filter(item => item !== checkedId);
            console.log('当前选中的County:', tmp);
        } 
    }); 
}); 
//Update Current Filters by COUNTY - Ends

关键改动说明 #

• 将移除按钮的事件绑定移到复选框change事件外部，只执行一次绑定，避免重复触发。
• 把重复的id="remove"改为class="county-filter-item"，符合HTML ID唯一性要求。
• 取消勾选时直接移除整个筛选项的<p>元素，而不是只隐藏按钮，实现真正的移除效果。
• 点击移除按钮时同步取消对应复选框的勾选状态，同时更新tmp数组，保证所有状态一致。
• 使用ES6模板字符串拼接HTML，比传统字符串拼接更易读、不易出错。

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