Question

请考虑以下代码：

CODE ：

$(document).on("click", "#add_new_item_ingredient", function() {
  $(this).siblings("#ingredients_table").append('<tr><td style="width:20%"> <input type="text" id="option_item_costs_2" class="form-control" placeholder="£2.50"> </td><td style="width:50%"> <input type="text" id="option_item_desc_2" class="form-control" placeholder="Ex. Extra tomato"> <input type="hidden" id="option_item_id_2" value="-1"> </td></tr>');
});

$(document).on("click", "#remove_new_item_ingredient", function() {
  $(this).siblings("#ingredients_table tr").each(function(index) {
    alert("!");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped notifications" id="ingredients_table">
  <tbody>
    <tr>..</tr>
    <tr>..</tr>
    <tr>..</tr>
  </tbody>
</table>
<button class="btn_1" id="add_new_item_ingredient">+ Ingredient</button>
<button class="btn_1" style="background:#C70000;" id="remove_new_item_ingredient">- Ingredient</button>

使用第一个按钮添加新行很有效，但是当我尝试从同一个表中删除最后一个tr元素时，它什么都不做。我现在正在尝试提醒，对于找到的每个tr元素，但我没有收到警报。我尝试获取总是返回0的表行计数，并尝试使用#ingredients_table >tbody >tr

尝试获取元素

我可以确认两个点击事件都正确触发，我可以正确选择表格元素，而不是任何一行。

任何建议都将不胜感激。

Answer 1

这是因为按钮#remove_new_item_ingredient没有tr兄弟姐妹。

您先选择表格，然后使用find获取tr：

$(this).siblings("#ingredients_table").find("tr").each(function(index) {

或使用：

$("#ingredients_table tr").each(function(index) {

在可更新性方面更好。

正如@ T.J.Crowder所说：

您的表格中有两个tbody元素（它们都没有关闭，可能是错字）
您要将行追加到table，而不是tbody

Answer 2

删除处理程序$.siblings在与按钮相同的级别上查找tr元素，但情况并非如此。 tr位于表格中，即下降2级。因此，只需将您的调用修改为$(this).siblings("#ingredients_table").find('tr')

即可

Jquery认为表是空的

2 个答案: