使用 jQuery 删除 HTML 表格行答案

【问题标题】：Delete HTML table rows with jQuery使用 jQuery 删除 HTML 表格行
【发布时间】：2016-01-20 16:21:21
【问题描述】：

我有一个 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();
  });

那么我该怎么做呢？

【问题讨论】：

标签： javascript php jquery html html-table

【解决方案1】：

由于行是动态的，您需要一个委托事件处理程序，附加到元素的不变祖先。如果没有什么更接近/方便的话，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();
});

委托事件通过在事件时应用 jQuery 选择器来工作，而不是在事件注册时。这意味着它们可以在以后存在。

【讨论】：

表 ID 为“items”。这是必须的吗？

【解决方案2】：

首先，把表格标签放在add上，然后试试这个：

            $('table').on('click', ".delete", function() {
              $(this).closest('tr').remove(); // more simple
            });

【讨论】：

您可能需要改写“将表格标签放在添加上”，因为我无法理解您的意思。此外，委派事件应针对单个特定元素，或 document 作为默认值。否则，您可能会使用多个委托处理程序，这是浪费/毫无意义的。 :)

【解决方案3】：

     <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

    $(document).ready(function () {

        $('#btadd').click(function () {

            szTr='<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>';

            $('#tbl_test tbody').append(szTr)
        });

        $('table').on('click', ".delete", function () {
            $(this).closest('tr.item-row').remove();

        });
    });
</script>
</head>
<body>
    <button value="Add Row" id="btadd">Add Row</button>
      <table id="tbl_test">
          <tbody>
            <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>   

               <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>  
              </tbody>
      </table>


</body>
</html>

【讨论】：

更好 - 取消投票。对于委托的事件处理程序，您应该以单个特定元素为目标，或者将document 作为默认值。例如，如果一个页面中有多个表，您的示例将在只需要一个时附加多个委托处理程序。