DataTable动态行点击事件无效，如何实现动态删除行？

嘿，你的问题主要出在两个细节上，我来帮你一步步搞定：

1. 函数名踩了JS关键字的坑 #

你把删除函数命名为delete，但这是JavaScript的保留关键字，浏览器会直接忽略这个函数的定义，所以点击按钮时才会提示“delete is not defined”。先把函数名改成别的，比如deleteRow就很合适。

2. 动态元素的事件绑定方式不对 #

你用onclick="delete()"直接写在HTML里，但动态添加的行和按钮在页面初始化时并不存在，这种内联事件绑定的方式对动态元素无效。更靠谱的做法是用事件委托——给已经存在的父元素（比如表格）绑定点击事件，通过选择器匹配后续生成的删除按钮。

修改后的完整代码 #

$(document).ready(function(){
    var t = $('#entryJurnal_table').DataTable({});
    
    // 改名后的删除函数，也可以直接把逻辑写在事件委托里
    var deleteRow = function (row) {
        t.row(row).remove().draw();
    }

    $('.add').on('click', function () {
        // 去掉内联onclick，给按钮加个专属类名"delete-row"
        var credit = '<td><input type="numeric" name="kredit[]" class="form-control"></td>';
        var debit = '<td><input type="numeric" name="debet[]" class="form-control"></td>';
        var opt= '<td><a href="#" class="btn btn-default delete-row">Delete row</a></td>';
        t.row.add($('<tr>' + credit + debit + opt + '</tr>')[0]).draw();
    });

    // 事件委托：给表格绑定点击事件，监听所有.delete-row按钮
    $('#entryJurnal_table').on('click', '.delete-row', function (e) {
        e.preventDefault(); // 阻止a标签默认跳转行为
        var currentRow = $(this).closest('tr'); // 获取当前按钮所在的行
        deleteRow(currentRow); // 执行删除逻辑
        // 也可以直接在这里写：t.row(currentRow).remove().draw();
    });
});

关键细节说明 #

• 阻止默认行为：删除按钮是<a>标签，点击会触发跳转，所以要用e.preventDefault()避免页面刷新。
• 事件委托的优势：不管后续添加多少行，只要按钮带.delete-row类，点击事件都会被父表格捕获处理，不用每次新增行都重新绑定事件。
• DataTable的正确删除姿势：用row().remove()删除对应行后，必须调用draw()刷新表格，确保DataTable的内部数据和DOM显示同步。

这样修改后，点击删除按钮就能正常删除对应的行了～

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