我有一个包含以下3列的表,其中每行都是动态附加的。
当用户点击删除按钮时,需要删除该特定行。
我已经为此编写了代码,但没有任何反应,也没有在控制台上出现任何错误。
上下文代码
$("#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();
}
这方面的任何建议都将受到高度赞赏。
答案 0 :(得分:1)
很少有事情需要解决:
你正在组合jQuery和vanilla JavaScript(getElementById
),所以我已经整理了一些并将其重写为jQuery。
HTML文档不能重复ID
个。如果您的append
多次运行,则会创建其他#removeConditionBtn
和#where-Condition-Join-Combo
元素,并且JS将停止工作。我已将这些更改为可重复使用的类。
绑定addEventListener
事件的click
只会绑定到首次运行代码时存在的(一个)#removeConditionBtn
元素。如果表内容更改为包含其他按钮,则绑定将不会更新(即使您使用的是类而不是ID)。我已经在表本身上使用jQuery on
重写了这一点,因此即使表的内容发生更改,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>
答案 1 :(得分:0)
显然你正在使用jQuery。你可以尝试:
$('#removeConditionButton').on('click', function(element) {
$(element).closest('tr').remove();
})
顺便说一句,您似乎错误地使用了id-property。 Id应该是唯一的,每个页面只能有一个具有相同ID的元素。在这种情况下,您应该使用class而不是id。
答案 2 :(得分:0)
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>