我有一个表单，它允许用户通过底行中的按钮添加一个新的表格行，这一切都运行良好。我现在还需要添加功能以拥有一个额外的按钮，以允许他们删除表格行。
我收集最简单的方法是使用：
$(this).closest('tr').remove();
但我无法将其集成到现有功能中。我也只需要“删除”按钮出现在除第一行之外的所有行上（即用户可以删除除第一行之外的所有行）。我在这里设置了一个 jsfiddle 来演示我当前的功能：
http://jsfiddle.net/fmdataweb/daayf/1/
因此，在我的示例中，当用户单击“添加另一个活动”按钮时，它应该像当前一样创建新的表行，但还要添加删除该行的“删除”按钮。我目前已将“删除”按钮硬编码到第一行，因为我现在确定如何使其仅出现在通过“添加新活动”按钮创建的新行中。
变化不大
在开始标记中，添加类addbtn并delbtn隐藏删除按钮
<td>
<input type="button" class="button mt5 addbtn" value="Add another activity" id="button1" name="button2" />
</td>
<td>
<input type="button" class="button mt5 delbtn" value="Delete" id="deleteRowButton" name="deleteRowButton" style="display: none"/>
</td>
然后
$('#lastYear').on('click', '.delbtn', function () {
$(this).closest('tr').remove()
});
var newIDSuffix = 2;
$('#lastYear').on('click', '.addbtn', function () {
var thisRow = $(this).closest('tr')[0];
$(thisRow).find('.delbtn').show();
var cloned = $(thisRow).clone();
cloned.find('input, select').each(function () {
var id = $(this).attr('id');
id = id.substring(0, id.length - 1) + newIDSuffix;
$(this).attr('id', id);
});
cloned.insertAfter(thisRow).find('input:text').val('');
cloned.find('.delbtn').hide();
cloned.find("[id^=lastYearSelect]")
.autocomplete({
source: availableTags,
select: function (e, ui) {
$(e.target).val(ui.item.value);
setDropDown.call($(e.target));
}
}).change(setDropDown);
$(this).remove();
newIDSuffix++;
});
演示：小提琴
看看这个！
if($("table tr").length > 1) {
$(this).parent().parent("tr").remove();
}
尝试这个
在您的删除按钮上
$('#lastYear').on('click', '#deleteRowButton', function(e){
$(this).closest('tr').remove()
})
首先，我将您Button1的“添加行”重命名为addRowButton，然后将委托方法更改为更具体到来自的 addRowButton
$('#lastYear').delegate('input[type="button"]'
喜欢这样：
$('#lastYear')delegate('input[type="button"][id^="addRow"]'
然后在委托方法中具体在之后
$(this).attr('id', id);
之后我添加以下内容：
var checkid = $(this).attr('id').substring(0,id.length-1);
if (checkid == 'deleteRowButto') // the 'deleteRowButto' is not a mistake
{
$(this).click(function() {
$(this).closest("tr").remove(); // I assign an onclick for the delete button in order to remove a specific row
});
}
编辑：
我做了一些改进，一旦删除了该行，就会显示上一个添加按钮，因此我添加了以下代码：
var showmenow = $(this).closest("tr").prev().find("td:eq(5)").find("input[type='button']");
$(showmenow).show();
$(this).closest("tr").remove();
});
而不是删除原始代码中的按钮：
$(this).remove();
newIDSuffix++;
我改用隐藏：
$(this).hide();
newIDSuffix++;
查看我创建的新jsfiddle。
由于您想将第一行用作所有其他行的模板，但不想对所有其他行进行删除，我们应该仅在第一次插入 java 脚本时插入删除。查看这个演示，我修改了你的小提琴这工作。
if(cloned.find('input.mt5[value="Delete"]').length==0){
cloned.find('.mt5').each(function(){
cloned.append($('<td><input type="button" class="button mt5" value="Delete" id="deleteRow'+newIDSuffix+'" name="deleteRowButton" /></td>'));
})
}
现在用于处理删除事件
$('#lastYear').delegate('input.button[value="Delete"]', 'click', function () {
var thisrow=$(this).parent().parent();
var button=thisrow.find("input.button[value='Add another activity']");
if(button.length>0){
var buttoncell=button.parent().detach();
var prevrow=thisrow.prev();
var prevDelete=prevrow.find('input.button[value="Delete"]');
var previd=(prevDelete.length>0)?prevDelete[0].id:'deleteRow1';
buttoncell.children()[0].id=previd.replace('deleteRow','button');
prevrow.find('input:text:last').parent().after(buttoncell);
}
thisrow.remove();
});
演示：http: //jsfiddle.net/vwdXD/2/
除了这里和那里的小疏忽之外，您在大多数情况下都做对了。我已经为你修复了你的代码，你可以在这里找到它：http: //jsfiddle.net/ManojRK/86Nec/。
请尝试通过使用 Code Diff Tool（如http://www.quickdiff.com）比较您的版本和我的版本来了解更改。它会教给你很多东西。
所做的更改：
Add Another Activity和Delete按钮click。希望能帮助你理解。
我使用了您提供的 jsfiddle，希望能更直接地回答您的问题。我采取的方法是：
步骤1：
// let's check whether they clicked the add or delete button
if ( $(this).val() == 'Add another activity' ) { // if the add button was clicked
步骤 2-3：
if ( $(thisRow).index() == 2 ) { // if it's the first row, don't let them delete
return false;
} else { // if it is not the first row remove this row and create an 'add' button in first row
$(thisRow).prev().find('td:last').prev().append('<input type="button" class="button mt5" value="Add another activity" id="button2" name="button2">');
$(thisRow).remove();
}
这是你的小提琴：http: //jsfiddle.net/daayf/22/
我在代码中添加了一些注释以提供一些帮助。我的编辑在：
希望这会有所帮助！
我建议id为每一行动态添加一个属性，这样您就可以id使用 jQuery 来引用它。
您可以像这样为按钮设置特定的类
<input type="button" class="button mt5 deleteButton" value="Delete" id="deleteRowButton" name="deleteRowButton" />
并将此代码添加到 jquery
$('.deleteButton').on('click',function(){
$(this).parent().parent().remove();
});
此 jquery 使用 deleteButton 类（删除按钮）删除输入的祖父母，这是它所在的行。
这样做怎么样？
$(this).find('tr').length > 0 ? $(this).closest('tr').remove() : ;
为什么您的“添加新活动”和“删除”具有相同的类“按钮 mt5”？不确定类名是否允许有空格。
您可能想在这里参考我的表格http://jsfiddle.net/yvonnezoe/nbrSR/1/：DI 顶部有一个固定行，后面有一个可以删除的动态行。
我的新行创建如下：
var str = '<tr id="' + rowID + '">' + '<td>' + index + '</td><td>' + rowID + '</td><td class="type_row_' + textInput + '">' + type + '</td><td class="feedback number">' + textInput + '</td>' + '<td id="status_'+rowID+'"></td>' + '<td><input type="checkbox" name="CB" id="monitor_' + rowID + '" class="custom" data-mini="true" /><label for="CB"> </label></td><td class="outputRemove">x</td>' + '</tr>';
$('#status_table tr:last').after(str);
删除按钮具有相同的类。因此，单击时可以删除行。
$('#status_table').on('click', '.outputRemove', function () {
$(this).closest('tr').remove();
$('#status_table tbody tr').find('td:first').text(function (index) {
return ++index;
});
});
希望它能以某种方式激励你:)
很简单的方法
function remove_point_item(th) {
var tr = $(th).closest("tr");
var _counter=0;
$(tr.siblings('tr')).each(function(){
_counter++;
});
if(_counter!=1){
tr.remove();
}
}