我的代码在按下加号时向表中添加一行，并将其添加到正确的引用中，因此当我提交表单数据时，我知道哪些数据是什么。减去我有点困难让它在删除刚刚添加的行或之前从表中添加的另一行。
我想也许是我的.bind在addRow函数的最后一行，因为我在这里看到它可能应该是.on？
Issue while removing a dynamically added row from a html table using jquery
在任何一种情况下，我的代码都在这里：
<script language='javascript' type='text/javascript'>
$(document).ready(function () {
function addRow() {
var $myTable = $("#myTable").find('tbody');
var parent = $(this).parent("td").parent("tr").attr("id");
var newRowID = $myTable.children("tr").length + 1;
var $newRow = $("<tr id='regFacEmpType" + newRowID + "' data-parent-row='" + parent + "'>");
$newRow.append($("<td align='center'>611000</td>"));
$newRow.append($("<td class='style1'><input type='text' name='RegEmpType" + newRowID + "' size='15' data-emp-type='Regular' /></td>"));
//see the data-emp-type not sure how else to know what is coming back unless name is going to be dynamically generated here using a counter. Should
//only be one type of each field, so instead of EmpType being generic: EmpTypeRegular1 and if they add another employee then EmpTypeRegular2 etc.
$newRow.append($("<td><input type='checkbox' name='RegEmpIDC" + newRowID + "' value='true' /></td>"));
$newRow.append($("<td align='center' id='RegEmpAgencyBudgt" + newRowID + "'>$43,0000</td>"));
$newRow.append($("<td align='center' id='RegEmpRowBdgt" + newRowID + "'>$3,0000</td>"));
$newRow.append($("<td class='style1' id='RegEmpRowAdjBudget" + newRowID + "'><input type='text' name='AdjustedBudgetRegularEmpType" + newRowID + "' /></td>"));
$newRow.append($("<td class='style1' id='RegEmpRowComments" + newRowID + "'><input type='text' name='RegEmpComments" + newRowID + "' /></td>"));
$newRow.append($("<td></td>").append($("<button class='addRegular' type='button'>+</button>").bind("click", addRow))); //make it where any plus subsequently added will add a row
$newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>").bind("click", removeRegularRow(newRowID))));
$myTable.append($newRow);
};
//for some reason this is called everytime I click the PLUS also it does nothing?
function removeRegularRow(index) {
$("#regFacEmpType" + index).remove();
};
$(".addRegular").on("click", addRow); //make it so the default row adds a new one.
});
</script>
</head>
<body>
<FORM action="" method="post">
<table id='myTable'>
<tbody>
<tr id="FacultyEmployees">
<th align="center" class="style1">Index Number</th>
<th align="center" class="style1">Faculty Type</th>
<th align="center" class="style1">IDC</th>
<th align="center" class="style1">Agency Budgeted Amount</th>
<th align="center" class="style1">PI Budgeted Amount</th>
<th align="center" class="style1">PI Adjusted Budget</th>
<th align="center" class="style1">Comments</th>
</tr>
<tr id="regFacEmpType1" data-child-type='regExemptEmpType1' data-parent-type='regFacEmpType1'>
<!-- next row would be regExemptEmpType1 etc -->
<td align="center">611000</td>
<td align="center">Regular</td>
<td><input type="checkbox" name="IDC" value="true" /></td>
<td align="center" id="agencyBudgeted1">$43,0000</td>
<td align="center" id="piBudgetedAmount1">$33,0000</td>
<td id="piAdjustedBudget1"><input type="text" name="PI Adjusted Budget" width="5" /></td>
<td class="style1"><input type="text" name="Comments" id="comments1" size="15" /></td>
<td><button type='button' class="addRegular">+</button></td>
</tr>
</tbody>
</table>
<button type="submit"/> Submit </button>
</FORM>
答案 0 :(得分：3)
当您使用ID到目标元素进入页面中的多个重复元素时，这是最不受欢迎的方法。
尝试进行ID匹配变得更加复杂，根据重复元素的类和结构进行遍历要简单得多。
另外一个处理程序可以管理所有重复元素。以下内容可以放在代码库中的任何位置......每页加载一次
$(document).on('click','.removeRegular', function(){
$(this).closest('tr').remove();
});
然后在tr上你可以添加一个可用于ajax请求的数据库标识符
<tr data-id="serverIdValue">
升级处理程序：
$(document).on('click','.removeRegular', function(){
var $row = $(this).closest('tr'), rowId = $row.data('id');
// only remove once server update confirmed
$.post('/api/row/delete', {id: rowId}, function(response){
// validate response first then remove the row
$row.remove();
});
});
注意关注点的分离......不需要内联代码，也不需要在任何类型的循环中处理它
答案 1 :(得分：3)
关于您的JavaScript代码：
bind()功能; removeRegularRow()功能; 在on('click'..：
$(document).ready个事件
$("#myTable").on('click', '.removeRegular', function(){
$(this).parent().parent().remove();
// It's faster with: $(this).closest('tr').remove();
});
问题是这行元素是动态插入的，只有在DOM加载完所有内容后才会ready。以一种简单的方式，您的算法无法找到所需的HTML插入内容已加载。
使用$('.some_parent_element').on('click', '.element_desired', function(){...});，您可以规避此问题并使用该元素执行任何操作。也就是说，让我们坚持适合所有年龄段的想法，不是吗？ ：P
你提到的answer有一个非常简洁的解释。试着理解这个答案，因为你需要了解未来的编码。
closest 好吧，我们have a great answer here in SO解释了为什么＆＃34;所以我会链接到它。但是，总结一下，它围绕搜索整个文档或文档的特定区域。还有一些库层需要处理才能最终到达您想要的位置。作为附录，请查看此performance test。
docs 说：
parent()获取当前匹配元素集中每个元素的父元素，可选择通过选择器进行过滤。
closest()对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。
有很多方法可以比parent()和closest()更快地依赖本地＆＃39; Java脚本。但你应该始终考虑可读性以及老板和客户固执 ......
还要考虑您的应用程序的目标受众。当然，可伸缩性很重要，但即使某些东西比其他东西慢，如果你的应用程序不是很庞大，或者没有很多数据要处理，那么你使用的东西真的很重要。只要确保正确使用它，并在需要时不断更改。
您可以验证带有更改的代码现在是否有效。只需点击按钮＆＃34;运行代码段＆＃34;低于。
$(document).ready(function () {
var index;
function addRow() {
var $myTable = $("#myTable").find('tbody');
var parent = $(this).parent("td").parent("tr").attr("id");
var newRowID = $myTable.children("tr").length + 1;
index = newRowID;
var $newRow = $("<tr id='regFacEmpType" + newRowID + "' data-parent-row='" + parent + "'>");
$newRow.append($("<td align='center'>611000</td>"));
$newRow.append($("<td class='style1'><input type='text' name='RegEmpType" + newRowID + "' size='15' data-emp-type='Regular' /></td>"));
//see the data-emp-type not sure how else to know what is coming back unless name is going to be dynamically generated here using a counter. Should
//only be one type of each field, so instead of EmpType being generic: EmpTypeRegular1 and if they add another employee then EmpTypeRegular2 etc.
$newRow.append($("<td><input type='checkbox' name='RegEmpIDC" + newRowID + "' value='true' /></td>"));
$newRow.append($("<td align='center' id='RegEmpAgencyBudgt" + newRowID + "'>$43,0000</td>"));
$newRow.append($("<td align='center' id='RegEmpRowBdgt" + newRowID + "'>$3,0000</td>"));
$newRow.append($("<td class='style1' id='RegEmpRowAdjBudget" + newRowID + "'><input type='text' name='AdjustedBudgetRegularEmpType" + newRowID + "' /></td>"));
$newRow.append($("<td class='style1' id='RegEmpRowComments" + newRowID + "'><input type='text' name='RegEmpComments" + newRowID + "' /></td>"));
$newRow.append($("<td></td>").append($("<button class='addRegular' type='button'>+</button>").bind("click", addRow))); //make it where any plus subsequently added will add a row
$newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>")));
$myTable.append($newRow);
};
$("#myTable").on('click', '.removeRegular', function(){
$(this).parent().parent().remove();
});
$(".addRegular").on("click", addRow); //make it so the default row adds a new one.
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<FORM action="" method="post">
<table id='myTable'>
<tbody>
<tr id="FacultyEmployees">
<th align="center" class="style1">Index Number</th>
<th align="center" class="style1">Faculty Type</th>
<th align="center" class="style1">IDC</th>
<th align="center" class="style1">Agency Budgeted Amount</th>
<th align="center" class="style1">PI Budgeted Amount</th>
<th align="center" class="style1">PI Adjusted Budget</th>
<th align="center" class="style1">Comments</th>
</tr>
<tr id="regFacEmpType1" data-child-type='regExemptEmpType1' data-parent-type='regFacEmpType1'>
<!-- next row would be regExemptEmpType1 etc -->
<td align="center">611000</td>
<td align="center">Regular</td>
<td><input type="checkbox" name="IDC" value="true" /></td>
<td align="center" id="agencyBudgeted1">$43,0000</td>
<td align="center" id="piBudgetedAmount1">$33,0000</td>
<td id="piAdjustedBudget1"><input type="text" name="PI Adjusted Budget" width="5" /></td>
<td class="style1"><input type="text" name="Comments" id="comments1" size="15" /></td>
<td><button type='button' class="addRegular">+</button></td>
</tr>
</tbody>
</table>
<button type="submit"/> Submit </button>
</FORM>
答案 2 :(得分：2)
如下所示绑定您的点击事件： -
$newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>").bind("click", function(){ removeRegularRow(newRowID); })));
答案 3 :(得分：2)
这一行：
.bind("click", removeRegularRow(newRowID))
这实际上是调用removeRegularRow()函数并期望返回function。
您可以通过将其包装在匿名函数中来更改它：
.bind("click", function() { removeRegularRow(newRowID) })
答案 4 :(得分：2)
有几件事。首先，.bind()不再是添加处理程序的首选方法。从jQuery 1.7开始，.on()是最好的方法。其次，在这段代码中：
.bind("click", removeRegularRow(newRowID))
您实际上在附加处理程序时调用removeRegularRow，并将返回值附加到click事件。这显然不是你想要的。您想传递函数引用：
.on("click", function(){ removeRegularRow(newRowID); } ))
然而，更好的方法是附加一个处理程序，使用表本身作为委托并过滤removeRegular按钮类：
$('#myTable').on('click', '.removeRegular', function() {
$(this).parent().closest('tr').remove();
});
这使用单个处理程序，并且因为它附加到表而不是行，所以您不必担心添加和删除元素时会发生什么（只要表始终存在）。您也不必担心跟踪ID和计数行等，因为按钮只是查看表行的祖先并将其删除。更简单。
答案 5 :(得分：0)
在这一行
$newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>").bind("click", removeRegularRow(newRowID))));
您正在触发此代码中的函数.bind("click", removeRegularRow(newRowID))这意味着您正在调用该函数而不是将其指定为处理程序。