我有一个表单，允许用户通过底行的按钮添加一个新的表行，这一切都运行良好。我现在还需要添加功能以获得一个额外的按钮，以允许他们删除表格行。
我收集最简单的方法是使用：
$(this).closest('tr').remove();
但是我无法将其集成到现有功能中。我还只需要“删除”按钮出现在除第一行之外的所有行上（即用户可以删除除第一行之外的所有行）。我在这里设置了一个jsfiddle来演示我当前的功能：
http://jsfiddle.net/fmdataweb/daayf/1/
因此，在我的示例中，当用户单击“添加另一个活动”按钮时，它应该像当前一样创建新的表行，但也添加删除该行的“删除”按钮。我现在已经将“删除”按钮硬编码到第一行，因为我现在确定如何只显示通过“添加新活动”按钮创建的新行。
答案 0 :(得分：4)
几乎没有变化
在开始标记中，添加类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++;
});
演示：Fiddle
答案 1 :(得分：4)
看看这个！
if($("table tr").length > 1) {
$(this).parent().parent("tr").remove();
}
答案 2 :(得分：3)
试试这个
在删除按钮上
$('#lastYear').on('click', '#deleteRowButton', function(e){
$(this).closest('tr').remove()
})
答案 3 :(得分：3)
首先，我将您的Button1重命名为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++;
我用hide代替：
$(this).hide();
newIDSuffix++;
查看我创建的新jsfiddle。
答案 4 :(得分：3)
由于您希望将第一行用作所有其他行的模板，但又不希望在所有其他行上删除，我们应该仅在首次插入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();
});
答案 5 :(得分：3)
除了这里和那里的小疏忽之外，你在大多数情况下都是正确的。我已经为您修复了代码，您可以在此处找到它：http://jsfiddle.net/ManojRK/86Nec/。
请尝试使用代码差异工具（例如http://www.quickdiff.com）比较您的版本和我的版本，以了解更改。它会教你很多。
所做的更改：
Add Another Activity事件的Delete和click按钮。希望它能帮助你理解。
答案 6 :(得分：3)
我使用了您提供的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/
我在代码中添加了一些注释以帮助解决问题。我的编辑是：
希望这会有所帮助！
答案 7 :(得分：2)
我建议为每行动态添加id属性，这样您就可以使用jQuery引用id。
答案 8 :(得分：2)
您可以为此按钮设置特定的类
<input type="button" class="button mt5 deleteButton" value="Delete" id="deleteRowButton" name="deleteRowButton" />
并将此代码添加到jquery
$('.deleteButton').on('click',function(){
$(this).parent().parent().remove();
});
这个jquery用deleteButton Class（删除按钮）删除输入的祖父，这是它所在的行。
答案 9 :(得分：0)
这样做怎么样？
$(this).find('tr').length > 0 ? $(this).closest('tr').remove() : ;
答案 10 :(得分：0)
为什么你的“添加新活动”和“删除”具有相同的类“按钮mt5”？不确定类的名称是否允许空格。
您可能需要在此处参考我的表http://jsfiddle.net/yvonnezoe/nbrSR/1/：D我在顶部有一个固定的行，可以删除后面的动态行。
我的新行创建如下：
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;
});
}）;
希望它以某种方式激励你：）
答案 11 :(得分：0)
非常简单的方式
function remove_point_item(th) {
var tr = $(th).closest("tr");
var _counter=0;
$(tr.siblings('tr')).each(function(){
_counter++;
});
if(_counter!=1){
tr.remove();
}
}