Question

当我尝试删除它的第一行时，但是当我添加更多行时，我无法删除它们。出于某种原因，我只能删除第一行。

这是我的HTML

<table class="pretty property_units" style="width:800px;">
<thead>
<tr>
<th>Bedroom</th>
<th>Bathroom</th>
<th>Square Feet</th>
<th>Price</th>
<th>Available</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="rows">
    <td><input type='text' name='bedroom[]' value='0' class='input-small'></td>
    <td><input type='text' name='bath[]' value='0' class='input-small'></td>
    <td><input type='text' name='sqrt[]' value='0' class='input-small'></td>
    <td><input type='text' name='price[]' value='0' class='input-small'></td>
    <td>
        <select name='avail[]' class='input-small'>
        <option value='yes'>Yes</option>
        <option value='no'>No</option>
        </select>
    </td>
    <td><button type="button" class="btn btn-danger btn-small removeRow">remove</button></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-small btn-primary addrow">add row</button>

这是我的js

<script type="text/javascript">
$(document).ready(function() {
    $(".addrow").click(function() {
        var tblrow = $('table.property_units tr.rows:last').clone();
        $("table.property_units tbody").append(tblrow);
    });

    $(".removeRow").click(function() {
        $(this).closest("tr").remove();
        return false;
    });
});
</script>

Answer 1

您必须委派活动：

$(document).on('click', '.removeRow', function() {
    $(this).closest("tr").remove();
    return false;
});

为了提高性能，我会在表中添加一个id，并将事件绑定到表而不是document。

有关进一步说明have a look at this question。

Answer 2

使用jQuery创建新元素时，必须绑定事件。您可以使用委托代替，点击此处： enter link description here

或者你可以使函数deleteRws（）{你的代码删除} 然后在以下之后调用它： $（“table.property_units tbody”）。append（tblrow）;

Answer 3

$(".removeRow").click(...仅适用于调用时存在的任何匹配行。它不会影响通过.addrow点击处理程序创建的新行（及其内容）。

您需要手动添加：

$(document).ready(function() {
  var remover = function() {
    $(this).closest("tr").remove();
    return false;
  };

  $(".addrow").click(function() {
          var tblrow = $('table.property_units tr.rows:last').clone();
          $('.removeRow', tblrow).click(remover);
          $("table.property_units tbody").append(tblrow);
      });

  $(".removeRow").click(remover);
});

示例：http://codepen.io/paulroub/pen/Bekit

动态删除行不会工作，只删除第一行而不删除其他行

3 个答案: