使用 jQuery 删除动态生成的表行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23249130/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Delete dynamically-generated table row using jQuery
提问by das kinder
the code below add and remove table row with the help of Jquery the add function works fine but the remove only work if I remove the first row
下面的代码在 Jquery 的帮助下添加和删除表行，添加功能工作正常，但删除仅在我删除第一行时有效
<table>
<tr>
<td><button type="button" class="removebutton" title="Remove this row">X</button>
</td>
<td><input type="text" id="txtTitle" name="txtTitle"></td>
<td><input type="text" id="txtLink" name="txtLink"></td>
</tr>
</table>
<button id ="addbutton">Add Row</button>
and the script
和脚本
var i = 1;
$("#addbutton").click(function() {
$("table tr:first").clone().find("input").each(function() {
$(this).val('').attr({
'id': function(_, id) {return id + i },
'name': function(_, name) { return name + i },
'value': ''
});
}).end().appendTo("table");
i++;
});
$('button.removebutton').on('click',function() {
alert("aa");
$(this).closest( 'tr').remove();
return false;
});
can anyone give me the explanation why I can only remove the first row ? thank so much
谁能给我解释为什么我只能删除第一行？非常感谢
回答by isherwood
You need to use event delegation because those buttons don't exist on load:
您需要使用事件委托，因为这些按钮在加载时不存在：
http://jsfiddle.net/isherwood/Z7fG7/1/
http://jsfiddle.net/isherwood/Z7fG7/1/
$(document).on('click', 'button.removebutton', function () { // <-- changes
alert("aa");
$(this).closest('tr').remove();
return false;
});
回答by Wilfredo P
回答by Danny
When cloning, by default it will not clone the events. The added rows do not have an event handler attached to them. If you call clone(true)then it should handle them as well.
克隆时，默认情况下不会克隆事件。添加的行没有附加事件处理程序。如果你打电话，clone(true)那么它也应该处理它们。
回答by Andre Figueiredo
A simple solution is encapsulate code of button event in a function, and call it when you add TRs too:
一个简单的解决方案是将按钮事件的代码封装在一个函数中，并在添加TR时调用它：
var i = 1;
$("#addbutton").click(function() {
$("table tr:first").clone().find("input").each(function() {
$(this).val('').attr({
'id': function(_, id) {return id + i },
'name': function(_, name) { return name + i },
'value': ''
});
}).end().appendTo("table");
i++;
applyRemoveEvent();
});
function applyRemoveEvent(){
$('button.removebutton').on('click',function() {
alert("aa");
$(this).closest( 'tr').remove();
return false;
});
};
applyRemoveEvent();
回答by atamata
I know this is old but I've used a function similar to this...
我知道这很旧，但我使用过类似于此的功能...
deleteRow: function (ctrl) {
//remove the row from the table
$(ctrl).closest('tr').remove();
}
... with markup like this ...
...带有这样的标记...
<tr>
<td><span id="spDeleteRow" onclick="deleteRow(this)">X</td>
<td> blah blah </td>
</tr>
...and it works fine
...它工作正常
回答by Uchenna Nnodim
$(document.body).on('click', 'buttontrash', function () { // <-- changes
alert("aa");
/$(this).closest('tr').remove();
return false;
});
This works perfectly, take not of document.body
这很好用，不要使用 document.body
