jQuery追加并删除动态表行

我可以为表添加许多行，但我无法删除很多行。 我只能删除每个顺序添加1行。

  $(document).ready(function(){ $("#addCF").click(function(){ $("#customFields").append('Custom Field      Remove'); $("#remCF").on('click',function(){ $(this).parent().parent().remove(); }); }); });  
 
 
Custom Field
 
       Add 
 
  

你可以在http://jsfiddle.net/3AJcj/看到代码

我需要帮助。

Answer 1

每页只能有一个唯一的ID。 将这些ID更改为类，并更改jQuery选择器。

此外，将.on（）移动到.click（）函数之外，因为您只需要设置一次。

http://jsfiddle.net/samliew/3AJcj/2/

 $(document).ready(function(){ $(".addCF").click(function(){ $("#customFields").append('Custom Field      Remove'); }); $("#customFields").on('click','.remCF',function(){ $(this).parent().parent().remove(); }); }); 

Answer 2

您可以使用jQuery在图像中动态添加和删除这样的表行。

这是html部分……

 
 
 
 
 
S. No
 
First Name
 
Last Name
 
Tamil
 
English
 
Computer
 
Total
 
 
 
 
1.
 
 
 
 
 
 
 
 
 
 
 - Delete + Add More 
 
  

接下来需要包含jquery ……

最后添加表行的脚本……

另请参阅演示和教程，以动态添加和删除表行

Answer 3

将ID更改为类：

 $("#customFields").append('Custom Field      Remove'); $(".remCF").on('click',function(){ $(this).parent().parent().remove(); }); 

http://jsfiddle.net/7BHDm/1/

Answer 4

除了其他答案，我想改进删除，更通用的东西：

 $(this).closest('tr').remove(); 

这比使用$(this).parent().parent().remove(); ，因为它不依赖于元素的深度。 因此，行的结构变得更加灵活。

Answer 5

这里有很多问题

1. ID在页面中应该是唯一的
2. 对于动态元素，您需要使用.on（）使用事件委派

防爆

 $(document).ready(function(){ $("#addCF").click(function(){ $("#customFields").append('Custom Field      Remove'); }); $("#customFields").on('click', '#remCF', function(){ $(this).parent().parent().remove(); }); }); 

演示： 小提琴

请参阅此演示 ，其中删除了id属性。

 $(document).ready(function(){ $("#addCF").click(function(){ $("#customFields").append('Custom Field      Remove'); }); $("#customFields").on('click', '.remCF', function(){ $(this).parent().parent().remove(); }); }); 

Answer 6

请尝试：

Answer 7

实时视图 链接Jsfiddle

变化简单，你可以解决它…..看看我新收集的代码。

  $(document).ready(function(){ $(".add-row").click(function(){ var name = $("#name").val(); var email = $("#email").val(); var markup = "" + name + "" + email + ""; $("table tbody").append(markup); }); // Find and remove selected table rows $(".delete-row").click(function(){ $("table tbody").find('input[name="record"]').each(function(){ if($(this).is(":checked")){ $(this).parents("tr").remove(); } }); }); }); 

 $(document).ready(function() { $(".add-row").click(function() { var name = $("#name").val(); var email = $("#email").val(); var markup = "" + name + "" + email + ""; $("table tbody").append(markup); }); // Find and remove selected table rows $(".delete-row").click(function() { $("table tbody").find('input[name="record"]').each(function() { if ($(this).is(":checked")) { $(this).parents("tr").remove(); } }); }); }); 

 form { margin: 20px 0; } form input, button { padding: 6px; font-size: 18px; } table { width: 100%; margin-bottom: 20px; border-collapse: collapse; background: #fff; } table, th, td { border: 1px solid #cdcdcd; } table th, table td { padding: 10px; text-align: left; } body { background: #ccc; } .add-row, .delete-row { font-size: 16px; font-weight: 600; padding: 8px 16px; } 

  
    
 
 
 
 
Select
 
Name
 
Email
 
 
 
 
 
  
 
Peter Parker
 
[e-mail]
 
 
 
 Delete Row 

Answer 8