jquery - jQuery 只移动一个元素

Question

这是代码：

....
<table>
<?php 
$count=1;
while ($row = $result->fetch_row()) { 
?>
  <tr>
  <td>data 1</td><td>data 2</td><td><input type="checkbox" id="<?php $count; ?>"></td>
  </tr>
<?php 
  $count++; 
} 
</table>
<input type="button" id="del" value="delete">
?>
....

对于我的 js 文件：

$("#del").click( function() {
  $("table input").each(function(){
    if($(this).prop("checked")) {
      $product_key = $(this).attr('id'); 
      $checked_row = $(this).closest('tr'); 
      $.post("one.php", {product_id: $product_key}, function(){
          $checked_row.remove();
      });
    }
  });
}); 

如果我勾选了多个复选框，则每次单击删除按钮时只会删除一行。为什么？我想删除我勾选的所有行。如何？

Answer 1

存储所有checked_rows并在.each

Answer 2

var $product_key = $(this).attr('id'); 
var $checked_row = $(this).closest('tr'); 

您必须使用，var否则这些变量具有全局范围。所以在你的回调中$.post，$checked_row参考最后一个。

Answer 3

尝试

$("#del").click( function() {
    $("table input:checked").each(function(){
        var $product_key = $(this).attr('id'); 
        var $checked_row = $(this).closest('tr'); 
        $.post("one.php", {product_id: $product_key}, function(){
            $checked_row.remove();
        });
    });
});