JavaScript手动添加表格行无法删除：事件委托实现求助

问题核心 #

手动克隆添加的表格行，其删除按钮无法触发删除逻辑；页面刷新后原有行的删除按钮正常，但希望无需刷新页面解决该问题。

现有代码的问题分析 #

1. 事件绑定冲突：同时使用事件委托$(document).on("click", ".remove", ...)和直接绑定$('.remove').click(processForm)，直接绑定仅对页面加载时存在的元素生效，动态添加的元素无法触发，且两种绑定会导致逻辑混乱。
2. this指向错误：在事件委托回调中直接调用processForm()时，processForm内部的this指向window而非点击的按钮，导致无法正确获取按钮ID和行ID。
3. DOM重复删除：回调中已执行$(this).parent().remove()，AJAX成功后又再次执行$("button[value='"+row_id+"']").closest('tr').remove()，造成重复操作。

修正后的代码实现 #

JavaScript部分 #

// 添加行逻辑保持不变，确保克隆的按钮保留.remove类
$('#add').click(function() {
    var ele = $('.itemslists tbody tr:last');
    var ele_clone = ele.clone();
    ele_clone.find('input, select').prop("disabled", false).val('');
    ele_clone.find('td div.dummy').removeClass('has-error has-success');
    ele_clone.find('td div.input-icon i').removeClass('fa-check fa-warning');
    ele_clone.find('input').val('0');
    ele_clone.find('td:last').show();
    ele.after(ele_clone);
        
    $('.remove').show();
        
    var hash1g = '<?php echo $podata_hash; ?>';
    var hash2g = '<?php echo $podata_hash2; ?>';
        
    $.ajax({
        type: 'POST',
        url: 'cbdelrow.php',
        cache: false,
        data: {action: 'add_row', hash1: hash1g, hash2: hash2g },

        success: function(response) {
             ele_clone.find('.remove').val(response);
             var newId = "remove_" + response;
             ele_clone.find('td button').attr("id", newId);
        }
    });
});

// 统一使用事件委托处理删除按钮点击，覆盖所有现有和动态添加的元素
$(document).on("click", ".remove", function() {
    var $btn = $(this);
    var rowCount = $('#tbl_edit tbody tr').length;
    
    // 只剩1行时隐藏删除按钮
    if (rowCount === 1) {
        $('.remove').hide();
        return;
    }
    
    // 直接从按钮value属性获取行ID，无需拆分ID
    var rowId = $btn.val();
    
    // 执行AJAX删除数据库记录
    $.ajax({
        type: 'POST',
        url: 'cbdelrow.php',
        data: { btn_val: rowId },
        success: function(response) {
            // AJAX成功后再删除DOM行
            $btn.closest('tr').remove();
            update_amounts();
            
            // 删除后只剩1行则隐藏删除按钮
            if ($('#tbl_edit tbody tr').length === 1) {
                $('.remove').hide();
            }
        },
        error: function(xhr, status, error) {
            alert('Error while delete.');
        }
    });
    
    // 即时更新金额
    update_amounts();
});

关键修改说明 #

1. 移除冗余绑定：删除$('.remove').click(processForm);，仅保留事件委托，确保动态添加的.remove按钮能触发事件。
2. 修正this指向：用$(this)获取当前点击的按钮元素，直接从value属性取行ID，避免ID拆分的冗余操作。
3. 调整DOM操作时机：仅在AJAX删除成功后移除DOM行，避免前端显示与数据库状态不一致；删除重复的DOM删除代码。
4. 简化行数量判断：直接通过$('#tbl_edit tbody tr').length获取行数量，逻辑更清晰。

额外优化建议 #

• 用data-*属性存储行ID（比如<button data-row-id="<?php echo $row['item_id']; ?>">），通过$btn.data('row-id')获取，更语义化，避免依赖ID或value属性。
• AJAX请求过程中给按钮添加禁用状态，防止重复点击。

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