点击移除按钮无法删除对应克隆div元素的问题求助

嘿，我来帮你搞定这个问题！你的代码里踩了几个jQuery动态元素操作的常见小坑，咱们一步步来修正：

先梳理问题根源 #

1. 选择器写错了：你写的$("btn-primary")漏掉了类选择器的.，jQuery根本找不到这个按钮，克隆事件自然触发不了；
2. 动态元素没绑定事件：克隆出来的移除按钮是后来生成的，直接给.btn-remove绑定事件的话，新按钮不会继承这个事件，得用事件委托；
3. 移除逻辑不够精准：要确保移除按钮只删除它所属的那个div，用.closest()方法是最稳妥的。

修正后的完整代码 #

$(function() {
  // 克隆按钮点击事件（修正类选择器）
  $(".btn-primary").on("click", function() {
    // 获取当前已有的.input-group数量
    const groupCount = $(".input-group").length;
    // 生成唯一ID，避免重复
    const newGroupId = "selection-" + groupCount;
    // 克隆原元素，替换新ID，注意要复制所有子元素
    const clonedGroup = $("#selection").clone().attr("id", newGroupId);
    
    // 把克隆的元素添加到页面（这里假设你有个容器#group-container，也可以用insertAfter放到原元素后面）
    clonedGroup.appendTo("#group-container");
  });

  // 用事件委托绑定移除按钮的点击事件（绑定到静态父元素，比如body或者更具体的容器）
  $("body").on("click", ".btn-remove", function() {
    // 找到当前按钮最近的.input-group父元素并移除
    $(this).closest(".input-group").remove();
  });
});

关键修改说明 #

• 修正选择器：把$("btn-primary")改成$(".btn-primary")，确保jQuery能找到克隆按钮；
• 事件委托：把移除事件绑定到页面一开始就存在的元素（比如body），这样不管后续生成多少新按钮，点击时都会触发事件；
• 精准移除：用.closest(".input-group")向上查找最近的目标div，避免误删其他元素；
• 唯一ID：克隆时替换新ID，避免页面出现重复ID（这会导致后续选择器失效，也不符合HTML规范）。

额外提醒 #

• 确保你的移除按钮有.btn-remove类；
• 被克隆的原元素#selection要存在，并且它的父容器（或者你用来放克隆元素的容器）是静态存在的；
• 如果你的布局里，要移除的不是.input-group，可以把.closest()里的选择器改成你实际要删除的div的类/ID。

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