当按下加号时，我的代码会向表中添加一行，并将其添加到正确的引用中，因此当我提交表单数据时，我知道哪些数据是什么。减去我有点困难让它在删除刚添加的行或之前从表中添加的另一行。
我想也许是我的.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>
关于您的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解释“为什么”所以我将链接到它。但是，总而言之，它围绕搜索整个文档或文档的特定区域。还有一些库层需要处理才能最终到达您想要的位置。作为附录，请检查此performance test。
文档说：
parent()获取当前匹配元素集中每个元素的父元素，可选择由选择器过滤。
closest()对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。
有些方法可以比依赖“原生”Java脚本的parent()和closest()更快地完成它。但是你应该总是考虑到可读性以及老板和客户的固执......
还要考虑您的应用程序的目标受众。当然，可伸缩性很重要，但即使某些东西比其他东西慢，如果你的应用程序不是很庞大或没有大量的数据需要处理，那么你使用的东西并不重要。只需确保正确使用它，并在需要时不断更改。
您可以验证带有更改的代码现在是否有效。只需点击下面的“运行代码段”按钮即可。
$(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>当您使用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();
});
});
注意关注点的分离......不需要内联代码，也不需要在任何类型的循环中处理它
像这样绑定你的点击事件： -
$newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>").bind("click", function(){ removeRegularRow(newRowID); })));
这一行：
.bind("click", removeRegularRow(newRowID))
这实际上是调用removeRegularRow()函数并期望function返回。
您可以通过将其包装在匿名函数中来更改它：
.bind("click", function() { removeRegularRow(newRowID) })
有几件事。首先，.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和计数行等，因为按钮只是查看表行的祖先并将其删除。更简单。
在这条线上
$newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>").bind("click", removeRegularRow(newRowID))));
您正在触发此代码中的函数.bind("click", removeRegularRow(newRowID))这意味着您正在调用该函数而不是将其指定为处理程序。