Javascript 删除数据表中的特定行时出现问题

我想做的是在表中添加数据后，我可以选择是否在操作列中删除它

我的问题是，如果我按了要删除的特定行上的“删除”按钮，则会删除表中不应删除的部分内容。有时它会删除表中的所有内容

脚本：

oTable=$（'#myTable'）.dataTable（）；
风险值数据=[
$（'#name'）.val（），
$（'#age'）.val（），
$（“#性别：选中”）.val（），
“删除”
];
oTable.fnAddData（数据）；
$（'.delete'）。单击（函数（）{
var行=$（this）.closest（'tr'）；
oTable.fnDeleteRow（第[0]行）；
});

每次创建一行时，您都会在已存在的删除之上绑定另一个

delete

事件。因此，如果在行中创建3项，则删除绑定如下所示：

ROW1 // <- Deletes on ROW1 'Delete' clicks
ROW2 // <- Deletes on ROW1, ROW2 'Delete' clicks
ROW3 // <- Deletes on ROW1, ROW2, ROW3 'Delete' clicks

// Moved outside save function to reference other places
oTable = $('#myTable').dataTable();

$('#Save').click(function () {
    if ($('#name').val() == '' || $('#age').val() == '' || $("input[name='gender']:checked").val() == undefined) {
        $("#dialog-confirm").dialog("open");

    } else {

        var data = [
        $('#name').val(),
        $('#age').val(),
        $("#gender:checked").val(),
            "<button class='delete'>Delete</button>"];

        oTable.fnAddData(data);
    }
});

// Moved outside save function and changed how the event bindings occur
$(document).on('click', '.delete', function () {
    var row = $(this).closest('tr');
    oTable.fnDeleteRow(row[0]);
});

您可以看到工作版本

// Moved outside save function to reference other places
oTable = $('#myTable').dataTable();

$('#Save').click(function () {
    if ($('#name').val() == '' || $('#age').val() == '' || $("input[name='gender']:checked").val() == undefined) {
        $("#dialog-confirm").dialog("open");

    } else {

        var data = [
        $('#name').val(),
        $('#age').val(),
        $("#gender:checked").val(),
            "<button class='delete'>Delete</button>"];

        oTable.fnAddData(data);
    }
});

// Moved outside save function and changed how the event bindings occur
$(document).on('click', '.delete', function () {
    var row = $(this).closest('tr');
    oTable.fnDeleteRow(row[0]);
});