Question

在我的表单中，我可以借助以下模板创建动态表格。

"image.png" = "es_image.png";

单击新按钮时，它正在为“服务”表创建一个新行。

现在当连续单击“x”按钮时，我需要删除它。

我把jquery写成如下

<table id="Newservice" style="display:none">
 <tr>
 <td><input id="type-%" style="width:100px" class="act_type" type="text" name="provider_service_dtls[#].activity_type" readonly value /></td>
<td><input id="code-%" class="act_code" style="width:150px" type="text" name="provider_service_dtls[#].activity_code"  value /></td>
<td><input id="start-%" class="datepicker" style="width:125px" type="text" name="provider_service_dtls[#].activity_start_date" value /></td>
<td><input id="clinician-%" class="clini" style="width:200px" type="text" name="provider_service_dtls[#].clinician" value /></td>
<td><input id="net-%" class="" style="width:40px" type="text" name="provider_service_dtls[#].net_amt" value /></td>
<td><input id="qty-%" class="" style="width:40px" type="text" name="provider_service_dtls[#].quantity" value />
<input type="hidden" name="provider_service_dtls.Index" value="%" />
 </td>
 <td><input id="delete" class="delete" value="X" type="button"></td>
  </tr>
  </table>

但它不起作用。之前有人这样做过。请帮忙

Answer 1

尝试更新至：

$('#service').on('click', 'td input.delete', function () {
    $(this).closest('tr').remove();
});

Answer 2

希望这会对你有所帮助

$(document).ready(function () {
  $(".delete").bind("click", function() { 
        $(this).closest('tr').remove();
    });
});

或者

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

Demo

Answer 3

尝试这样做，您必须使用事件委派，因为tr是动态的：

$(document).on('click', "input.delete", function () {
   $(this).closest('tr').remove();
});

Answer 4

你非常接近。

根据您的代码，您只需将$('#service').on()替换为：

即可

$('#delete').on('click', function () {
    $(this).closest('tr').remove();
});

Answer 5

您必须为所有删除按钮注册点击事件，但您只注册了之前选择的buttonSelector点击事件。因此，您应该使用'td input.delete'选择器而不是buttonSelector;

使用jquery从动态创建的表中删除一行

5 个答案: