javascript - 使用 jQuery 删除 HTML 表格行

Question

我有一个 HTML 表，可以通过单击按钮动态添加行(也可以使用 jQuery 完成)。我现在想要的是，我需要在每行旁边有一个按钮。按下它会删除该特定行。

表格如下。

<tr class="item-row">
         <td class="item-name">
          <div class="delete-wpr"><textarea></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>

           <td><input type="text" class="slno"/></td>           

          <td><input type="text" class="cost"/></td>
          <td><input type="text" class="qty"/></td>
          <td><span class="price"></span></td>
      </tr>  

添加更多行的Jquery如下。

 $("#addrow").click(function(){
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><input type="text" class="slno"/><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td><input type="text" class="slno"/></td><td><input type="text" class="cost"/></td><td><input type="text" class="qty"/></td><td><span class="price"></span></td></tr> ');

我正在使用的功能是这个。但它不起作用。

$(".delete").on('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
  });

那么我该怎么做呢？

Answer 1

由于行是动态的，您需要一个委托(delegate)事件处理程序，附加到元素的不变祖先。如果没有更接近/方便的情况，document 是最好的默认值:

$(document).on('click', ".delete", function(){
    $(this).closest('.item-row').remove();
    update_total();
    if ($(".delete").length < 2) $(".delete").hide();
});

在您的示例中，table 元素将是一个很好的目标。

例如

$('#items').on('click', ".delete", function(){
    $(this).closest('.item-row').remove();
    update_total();
    if ($(".delete").length < 2) $(".delete").hide();
});

委托(delegate)事件的工作方式是在事件发生时应用 jQuery 选择器，而不是在事件注册时应用。这意味着它们可以稍后存在。