jQuery表单克隆分组精准删除问题求助：无法移除指定克隆模块

问题出在哪？ #

1. 你给delete和add按钮用了重复的id，HTML里id必须是唯一的，克隆后多个按钮共用同一个id，导致代码找不到正确的触发目标。
2. 之前的删除逻辑没关联到点击的那个分组，要么删全部要么删最后一个，根本没定位到当前按钮所属的卡片。
3. 虽然你用了clone(true,true)复制事件，但id重复的问题还是会让事件绑定混乱。

怎么改？ #

第一步：修正HTML的重复id问题

把按钮的id="delete"改成class="delete-btn"，id="add"改成class="add-btn"，避免重复标识：

<div id=firstform>
<div class="card">
   <label class="label-nuevo-oficio" id="label-title">
       Title
   </label>
   <button type="button" class="btn btn-light delete-btn">
       delete 
   </button>
   <div>
     <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="tipoSolicitud" id="auth" value="yes">
     <label class="form-check-label" for="inlineRadio1">Autorización</label>
     </div>
     <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="tipoSolicitud" id="update" value="no">
     <label class="form-check-label" for="inlineRadio2">Actualización</label>
     </div>
     <label class="label-requis numero-oficio" id="label-numero-oficio">
            Number Oficio
     </label></br>
     <input class="form-control" type="text" name="num-oficio[]">
     <label class="label-requis fecha-emision" id="fecha-emision">
            Date
     </label></br>
     <input class="form-control" type="date" aria-label="default input example">
     <label class="label-requis fecha-tesoreria" id="fecha-tesoreria">
            Birthday
     </label></br>
     <input class="form-control" type="date" aria-label="default input example">
     <button type="button" class="btn btn-light add-btn">
       add 
     </button>
   </div>
</div> 
</div>
<div id="new-form"></div>

第二步：优化克隆的add功能

克隆时移除原卡片的id（避免重复），同时修正日期初始化的无效值：

$(document).ready(function (){
    // 用事件委托绑定add按钮，动态克隆的按钮也能生效
    $(document).on('click', '.add-btn', function() {
        $('#firstform .card') 
            .clone(true, true)
            .removeAttr('id') // 移除原卡片的id，防止重复
            // 清空表单内容
            .find("input:text").val("").end()
            .find('input[type=radio]').prop('checked', false).end()
            .find('input[type=date]').val('').end() // 用空字符串代替无效的00-00-0000
            .find('input[type=number]').val('0.0').end()
            
            .appendTo('#new-form');
    });
});

第三步：实现精准删除功能

用事件委托绑定删除按钮，点击时找到当前按钮所在的.card并删除：

$(document).ready(function (){
    // 事件委托监听所有删除按钮，包括动态添加的
    $(document).on('click', '.delete-btn', function() {
        // 找到当前按钮最近的.card父元素，只删这个分组
        $(this).closest('.card').remove();
    });
});

核心要点 #

• 事件委托：$(document).on('click', '.delete-btn', ...)能让动态生成的按钮也触发事件，不用每次克隆都重新绑定。
• closest()方法：精准定位点击按钮所属的卡片，不会误删其他分组。
• 唯一标识：把按钮的id换成class，彻底解决重复id导致的选择器冲突。

内容的提问来源于stack exchange，提问作者Michel Pellegrin Quiroz