点击事件中移除动态ID：复选框弹窗增删功能的代码问题

看起来你遇到的核心问题是无法在取消勾选时定位到对应的弹窗DIV，原因主要有两个：一是弹窗变量的作用域问题，二是错误使用了closest()方法（它只能查找当前元素的父级元素，而你的弹窗和复选框没有父子关系）。我来帮你调整代码，解决这个问题：

问题分析 #

1. 原代码中$newDivCouleur是在if分支内定义的，到else分支时这个变量已经不存在了，自然无法操作它
2. closest()方法是向上遍历DOM树找父元素，但你的弹窗是追加到.maxWidthPoPup里的，和复选框不在同一个层级，所以这个方法完全不适用
3. 没有给复选框和对应的弹窗建立明确的关联，导致取消勾选时找不到要删除的目标

修改后的代码 #

var couleurUnique = 1;

$("[id^=branche_search_form_couleurs_").on("click", function() {
    var $checkbox = $(this);
    var checkboxValue = $checkbox.val();
    
    if ($checkbox.is(":checked")) {
        // 创建弹窗元素
        var $newDivCouleur = $('<div class="poPupFiltre" data-couleur-value="' + checkboxValue + '">' +
            '<div class="sousBlockPoPup">' +
                '<a href="#" class="aPoPup"><img class="img-fluid imgPoPup" src="{{ asset (\'../build/images/supprimer.svg\') }}" alt=""></a>' +
                '<p class="textPopUp">' + checkboxValue + '</p>' +
            '</div>' +
        '</div>');
        
        $newDivCouleur.attr("id", "PopUpCouleur_" + couleurUnique++);
        $newDivCouleur.appendTo(".maxWidthPoPup");
        
        // 给弹窗的删除按钮绑定事件
        $newDivCouleur.find(".aPoPup").on("click", function(e) {
            e.preventDefault();
            $newDivCouleur.remove();
            $checkbox.prop("checked", false); // 同步取消复选框勾选状态
        });
    } else {
        // 根据复选框的值找到对应的弹窗并删除
        $(".poPupFiltre[data-couleur-value='" + checkboxValue + "']").remove();
    }
});

关键改动说明 #

1. 建立关联关系：给每个弹窗添加data-couleur-value属性，值和对应复选框的value一致，这样取消勾选时可以通过这个属性精准找到要删除的弹窗
2. 调整变量作用域：把复选框的jQuery对象存在$checkbox变量里，方便后续复用
3. 修复删除逻辑：取消勾选时，通过属性选择器$(".poPupFiltre[data-couleur-value='"+checkboxValue+"']")定位到对应弹窗并删除
4. 增加弹窗删除按钮的同步逻辑：点击弹窗里的删除图标时，不仅删除弹窗，还要同步把对应的复选框设为未勾选状态，保持状态一致

另外，建议你确保所有颜色的value是唯一的，这样data-couleur-value才能准确匹配到对应的弹窗哦。

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