在Javascript中单击按钮删除表行

我有一个包含以下3列的表，其中每一行都是动态追加的

• 条件：仅仅是WHERE子句条件语句字符串
• 移除：移除该行的按钮（移除条件）
• 加入：下拉组合

当用户单击“删除”按钮时，需要删除该特定行

我已经为此编写了代码，但是没有发生任何事情，并且在控制台上也没有收到任何错误

上下文中的代码

$("#whereConditionTable").append(
        "<tr>"+
            "<td>"+conditionString+"</td>"+
            "<td><button id='removeConditionBtn' name='removeConditionBtn' class='btn btn-default'><img src='resources/images/removeWhereCondition.png' width='25px' height='25px'></button>"+
            "<td>"+
                "<select id='where-Condition-Join-Combo' name='where-Condition-Join-Combo' class='form-control'>"+
                  "<option value='1'>Join using</option>"+
                  "<option value='2'>AND</option>"+
                  "<option value='3'>OR</option>"+
                "</select>"+
              "</td>"+
        "</tr>"
   );

    document.getElementById("removeConditionBtn").addEventListener("click", function() {
    removeWhereCondition();
}, false);

在此方面的任何建议都将不胜感激。

需要解决的问题如下：

您将jQuery和vanilla JavaScript（

getElementById

）结合起来，因此我整理了其中的一些内容，并将其重写为jQuery

HTML文档不能有重复的

ID

s。如果您的

append

运行了多次，它将创建额外的

#removeConditionBtn

和

#其中Condition Join Combo

元素，JS将停止工作。我已经将这些类更改为可重用的类

您绑定

单击事件的
addEventListener
只会绑定到第一次运行代码时存在的（一个）
#removeConditionBtn
元素。如果表内容更改为包含其他按钮，则绑定不会更新（即使使用的是类而不是ID）。我已经在表本身上使用jQuery
重写了它，因此即使表的内容发生更改，
单击事件仍会触发

工作演示如下：

var conditionString=“text”；
$（“#whereConditionTable”）。追加(
"" +
“”+conditionString+“”+
"" +
"" +
"" +
“使用加入”+
“和”+
“或”+
"" +
"" +
""
);
$（“#whereConditionTable”）。在（“单击”，“删除条件btn”，函数（）上{
$（this）.tr.remove（）；
});
显然您正在使用jQuery。你可以试试：

$('#removeConditionButton').on('click', function(element) {
    $(element).closest('tr').remove();
})

顺便说一下，您似乎没有正确使用id属性。Id应该是唯一的，每个页面只能有一个Id相同的元素。在这种情况下，您应该使用类而不是Id。

函数deleteRow（r）{
var i=r.parentNode.parentNode.rowIndex；
document.getElementById（“myTable”）.deleteRow（i）；
}

表，td{
边框：1px纯黑；
}
一排
第2排
第3排
谢谢。这实际上起了作用。
$('#removeConditionButton').on('click', function(element) {
    $(element).closest('tr').remove();
})