在 Javascript 中单击按钮删除 table 行

Question

我有一个 table，其中包含以下 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);

removeWhereCondition()

function removeWhereCondition()
{
    $(this).closest("tr").remove();
}

如有任何建议，我们将不胜感激。

Answer 1

需要解决的问题：

您正在组合 jQuery 和原版 JavaScript (getElementById)，所以我整理了其中的一些并将其重写为 jQuery.
HTML 文档不能有重复的 ID。如果你的 append 运行不止一次，它会创建额外的 #removeConditionBtn 和 #where-Condition-Join-Combo 元素，并且 JS 将停止工作。我已将它们更改为 classes，它们可重复使用。
你的 addEventListener 绑定一个 click 事件只会绑定到（一个）#removeConditionBtn 代码第一次出现时存在的元素运行.如果 table 内容更改为包含其他按钮，则您的绑定不会更新（即使您使用的是 class 而不是 ID）。我在 table 本身上使用 jQuery on 重写了它，因此即使 table 的内容发生变化，click 事件仍会触发。

工作演示如下：

var conditionString = "text";

$("#whereConditionTable").append(
  "<tr>" +
  "<td>" + conditionString + "</td>" +
  "<td><button class='removeConditionBtn' name='removeConditionBtn' class='btn btn-default'><img src='resources/images/removeWhereCondition.png' alt='Remove' width='25px' height='25px'></button>" +
  "<td>" +
  "<select class='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>"
);

$("#whereConditionTable").on("click", ".removeConditionBtn", function() {
  $(this).closest("tr").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="whereConditionTable"></table>

Answer 2

显然您正在使用 jQuery。你可以试试：

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

顺便说一下，您似乎错误地使用了 id-属性。 ID 应该是唯一的，每个页面只能有一个具有相同 ID 的元素。在这种情况下，您应该使用 class 而不是 id.

Answer 3

function deleteRow(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("myTable").deleteRow(i);
}

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table id="myTable">

<tr>
  <td>Row 1</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 2</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 3</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
</table>
</body>
</html>

在 Javascript 中单击按钮删除 table 行

Delete a table row on button click in Javascript

html

javascript

html-table

delete-row