jQuery append and remove dynamic table row

Question

I can add many rows for a table  but I can t remove many rows  I only can remove 1 row per sequential add    lt script src    ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt   lt script gt    document  ready function            addCF   click function                customFields   append   lt tr valign  top  gt  lt th scope  row  gt  lt label for  customFieldName  gt Custom Field lt  label gt  lt  th gt  lt td gt  lt input type  text  class  code  id  customFieldName  name  customFieldName    value    placeholder  Input Name    gt   amp nbsp   lt input type  text  class  code  id  customFieldValue  name  customFieldValue    value    placeholder  Input Value    gt   amp nbsp   lt a href  javascript void 0    id  remCF  gt Remove lt  a gt  lt  td gt  lt  tr gt                 remCF   on  click  function                  this  parent   parent   remove                             lt  script gt    lt table class  form-table  id  customFields  gt   lt tr valign  top  gt       lt th scope  row  gt  lt label for  customFieldName  gt Custom Field lt  label gt  lt  th gt       lt td gt           lt input type  text  class  code  id  customFieldName  name  customFieldName    value    placeholder  Input Name    gt   amp nbsp           lt input type  text  class  code  id  customFieldValue  name  customFieldValue    value    placeholder  Input Value    gt   amp nbsp           lt a href  javascript void 0    id  addCF  gt Add lt  a gt       lt  td gt   lt  tr gt   lt  table gt    You can see the code at http   jsfiddle net 3AJcj   I need help

User · Answer

lt script gt        document  ready function            var add     lt tr valign  top  gt  lt th scope  row  gt  lt label for  customFieldName  gt Custom Field lt  label gt  lt  th gt  lt td gt            add     lt input type  text  class  code  id  customFieldName  name  customFieldName    value    placeholder  Input Name    gt  amp nbsp  amp nbsp  amp nbsp            add     lt input type  text  class  code  id  customFieldValue  name  customFieldValue    value    placeholder  Input Value    gt  amp nbsp            add     lt a href  javascript void 0    class  remCF  gt Remove lt  a gt  lt  td gt  lt  tr gt                 addCF   click function        customFields   append add                    customFields   on  click    remCF  function                var inx       remCF   index this                  tr   eq inx 1  remove                         lt  script gt

User · Answer

Change ID to class        customFields   append   lt tr valign  top  gt  lt th scope  row  gt  lt label for  customFieldName  gt Custom Field lt  label gt  lt  th gt  lt td gt  lt input type  text  class  code  id  customFieldName  name  customFieldName    value    placeholder  Input Name    gt   amp nbsp   lt input type  text  class  code  id  customFieldValue  name  customFieldValue    value    placeholder  Input Value    gt   amp nbsp   lt a href  javascript void 0    class  remCF  gt Remove lt  a gt  lt  td gt  lt  tr gt          remCF   on  click  function                  this  parent   parent   remove                  http   jsfiddle net 7BHDm 1

User · Answer

live view Link Jsfiddle  vary simple way you can solve it       take a look my new collected code       document  ready function                    add-row   click function                    var name       name   val                    var email       email   val                    var markup     lt tr gt  lt td gt  lt input type  checkbox  name  record  gt  lt  td gt  lt td gt     name     lt  td gt  lt td gt     email     lt  td gt  lt  tr gt                       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                                                                                x000D   x000D    document  ready function     x000D        add-row   click function     x000D      var name       name   val    x000D      var email       email   val    x000D      var markup     lt tr gt  lt td gt  lt input type  checkbox  name  record  gt  lt  td gt  lt td gt     name     lt  td gt  lt td gt     email     lt  td gt  lt  tr gt    x000D         table tbody   append markup   x000D        x000D   x000D       Find and remove selected table rows x000D        delete-row   click function     x000D         table tbody   find  input name  record     each function     x000D        if    this  is   checked      x000D            this  parents  tr   remove    x000D          x000D          x000D        x000D      x000D  form   x000D    margin  20px 0  x000D    x000D  form input  x000D  button   x000D    padding  6px  x000D    font-size  18px  x000D    x000D  table   x000D    width  100   x000D    margin-bottom  20px  x000D    border-collapse  collapse  x000D    background   fff  x000D    x000D  table  x000D  th  x000D  td   x000D    border  1px solid  cdcdcd  x000D    x000D  table th  x000D  table td   x000D    padding  10px  x000D    text-align  left  x000D    x000D  body   x000D    background   ccc  x000D    x000D   add-row  x000D   delete-row   x000D    font-size  16px  x000D    font-weight  600  x000D    padding  8px 16px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt form gt  x000D     lt input type  text  id  name  placeholder  Name  gt  x000D     lt input type  text  id  email  placeholder  Email  gt  x000D     lt input type  button  class  add-row  value  Add Row  gt  x000D   lt  form gt  x000D   lt table gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Select lt  th gt  x000D         lt th gt Name lt  th gt  x000D         lt th gt Email lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt  x000D           lt input type  checkbox  name  record  gt  x000D         lt  td gt  x000D         lt td gt Peter Parker lt  td gt  x000D         lt td gt peterparker mail com lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   lt button type  button  class  delete-row  gt Delete Row lt  button gt  x000D   x000D   x000D

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt       lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt        lt script gt  enter code here            document  ready function      var result 1     input   keyup function    enter code here          tr   each function               var sum     this  find  td combat   text             var combat     this  find  input combat   val             if   isNaN sum   amp  amp  sum length     0  amp  amp   isNaN combat   amp  amp  combat length     0                     result   parseFloat sum  parseFloat combat                              this  find   total-combat   html result                            add   click function            var sno     this  parent   siblings   sno   text            var cust     this  parent   siblings   cust   text            var price     this  parent   siblings  td combat   text            var rowValue                 this  closest  tr   find  input   each function                       rowValue push   this  val                       return   this  val                                    var rowValue1                 this  closest  tr   find  span   each function                       rowValue1 push   this  text                       return   this  val                                               var markup     lt tr gt  lt td class  sno  gt     sno     lt  td gt  lt td class  custname  gt     cust    lt  td gt  lt td class  price  gt     price    lt  td gt  lt td gt  lt input type  text  class  newtext  value    rowValue 0     gt  lt  td gt  lt td class  total  gt     rowValue1 0     lt  td gt  lt td gt  lt input type  submit  class  update  value  upd  gt  lt input type  button  class  del  value  del  gt  lt  td gt  lt  tr gt               var rightcol     this  closest  tr   find   cust            var row count        tbl1 tbody tr   length          alert row count            if  row count    0                                  tbl1 tbody   append markup                       else                       var tes 0                  tbl1 tbody tr   each function                            var leftcol     this  find   custname                                 if rightcol html      leftcol html                                      alert leftcol html    -----------------  rightcol html                                       this  find   sno   text sno                                     this  find   custname   text cust                                     this  find   price   text price                                     this  find   newtext   val rowValue 0                                      this  find   total   text rowValue1 0                                    tes                                                           if tes  0                           tbl1 tbody   append markup                                                          tb   on  click     update   function e                    var rowValues                                             this  closest  tr   find  input   each function                                       rowValues push   this  val                                       return   this  val                                                               var total   this  closest  tr   find   total   text                        var right cols     this  closest  tr   find   custname                         tbl tbody tr   each function                            var row     this                           var left cols     this  find   cust                                if left cols html      right cols html                                         this  find   text   val rowValues 0                                      this  find   total-combat   text total                                                                                                           tb   on  keyup    input   function                         tr   each function                           var sum     this  find  td price   text                         var combat     this  find  input newtext   val                         if   isNaN sum   amp  amp  sum length     0  amp  amp   isNaN combat   amp  amp  combat length     0                                result   parseFloat sum  parseFloat combat                                                         this  find   total   html result                                                            tb   on  click     del   function                         this  closest  tr   remove                                 lt  script gt   lt style gt        table style       width  500px      margin  0px auto            table      width  100       border-collapse  collapse            table tr td      width  50       border  5px solid  ff751a      padding  5px            table tr th      border  5px solid  79ff4d      padding  5px            input          width 35px             tbl1          margin-top  50px          border  0px solid  cdcdcd             btn          float left             lt  style gt           lt title gt E-Commerce-Table lt  title gt   lt  head gt   lt body gt    lt div class  table style  gt       lt caption gt Price-List lt  caption gt   lt table class  tbl  gt       lt tr gt           lt th gt S No lt  th gt           lt th gt P Name lt  th gt           lt th gt Price lt  th gt           lt th gt Qnty lt  th gt           lt th gt Rate lt  th gt              lt th gt action lt  th gt       lt  tr gt       lt tbody gt       lt tr gt           lt td class  sno  gt 1 lt  td gt           lt td class  cust  gt A lt  td gt           lt td class  combat  gt 5 lt  td gt           lt td class  tester  gt  lt input type  number  id  qnty1  name  Qnty  value  0  class  combat text  gt  lt  td gt           lt td gt  lt span class  total-combat  gt  lt  span gt  lt  td gt           lt td gt  lt input type  submit  name  submit  value  Add  class  add  gt  lt  td gt       lt  tr gt       lt tr gt           lt td class  sno  gt 2 lt  td gt           lt td class  cust  gt B lt  td gt           lt td class  combat  gt 8 lt  td gt           lt td gt  lt input type  number  id  qnty2  name  Qnty  value  0  class  combat text  gt  lt  td gt           lt td gt  lt span class  total-combat  gt  lt  span gt  lt  td gt           lt td gt  lt input type  submit  name  submit  value  Add  class  add  gt  lt  td gt       lt  tr gt       lt tr gt           lt td class  sno  gt 3 lt  td gt           lt td class  cust  gt C lt  td gt           lt td class  combat  gt 7 lt  td gt           lt td gt  lt input type  number  id  qnty3  name  Qnty  value  0  class  combat text  gt  lt  td gt           lt td gt  lt span class  total-combat  gt  lt  span gt  lt  td gt           lt td gt  lt input type  submit  name  submit  value  Add  class  add  gt  lt  td gt       lt  tr gt       lt tr gt           lt td class  sno  gt 4 lt  td gt           lt td class  cust  gt D lt  td gt           lt td class  combat  gt 2 lt  td gt           lt td gt  lt input type  number  id  qnty4  name  Qnty  value  0  class  combat text  gt  lt  td gt           lt td gt  lt span class  total-combat  gt  lt  span gt  lt  td gt           lt td gt  lt input type  submit  name  submit  value  Add  class  add  gt  lt  td gt       lt  tr gt   lt  tbody gt    lt  table gt         lt table class  tbl1  gt           lt thead gt               lt tr gt                   lt th gt S No lt  th gt                   lt th gt P Name lt  th gt                   lt th gt Price lt  th gt                   lt th gt Qnty lt  th gt                   lt th gt Rate lt  th gt                   lt th gt action lt  th gt               lt  tr gt           lt  thead gt           lt tbody class  tb  gt            lt  tbody gt       lt  table gt       lt button type  submit  name  addtocart  id  btn  gt Add-to-cart lt  button gt   lt  div gt    lt  body gt   lt  html gt

User · Answer

You only can have one unique ID per page  Change those IDs to classes  and change the jQuery selectors as well   Also  move the  on   outside of the  click   function  as you only need to set it once   http   jsfiddle net samliew 3AJcj 2     document  ready function            addCF   click function                customFields   append   lt tr valign  top  gt  lt th scope  row  gt  lt label for  customFieldName  gt Custom Field lt  label gt  lt  th gt  lt td gt  lt input type  text  class  code  id  customFieldName  name  customFieldName    value    placeholder  Input Name    gt   amp nbsp   lt input type  text  class  code  id  customFieldValue  name  customFieldValue    value    placeholder  Input Value    gt   amp nbsp   lt a href  javascript void 0    class  remCF  gt Remove lt  a gt  lt  td gt  lt  tr gt                     customFields   on  click    remCF  function              this  parent   parent   remove

User · Answer

You can dynamically add and delete table rows like this in the image using jQuery..

Here is html part...

<form id='students' method='post' name='students' action='index.php'>

    <table border="1" cellspacing="0">
      <tr>
        <th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
        <th>S. No</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Tamil</th>
        <th>English</th>
        <th>Computer</th>
        <th>Total</th>
      </tr>
      <tr>
        <td><input type='checkbox' class='case'/></td>
        <td>1.</td>
        <td><input type='text' id='first_name' name='first_name[]'/></td>
        <td><input type='text' id='last_name' name='last_name[]'/></td>
        <td><input type='text' id='tamil' name='tamil[]'/></td>
        <td><input type='text' id='english' name='english[]'/> </td>
        <td><input type='text' id='computer' name='computer[]'/></td>
        <td><input type='text' id='total' name='total[]'/> </td>
      </tr>
    </table>

    <button type="button" class='delete'>- Delete</button>
    <button type="button" class='addmore'>+ Add More</button>
    <p>
    <input type='submit' name='submit' value='submit' class='but'/></p>
</form>

Next need to include jquery...

<script src='jquery-1.9.1.min.js'></script>

Finally script which adds the table rows...

<script>
  var i=2;
  $(".addmore").on('click',function(){
    var data="<tr><td><input type='checkbox' class='case'/></td><td>"+i+".</td>";
        data +="<td><input type='text' id='first_name"+i+"' name='first_name[]'/></td> <td><input type='text' id='last_name"+i+"' name='last_name[]'/></td><td><input type='text' id='tamil"+i+"' name='tamil[]'/></td><td><input type='text' id='english"+i+"' name='english[]'/></td><td><input type='text' id='computer"+i+"' name='computer[]'/></td><td><input type='text' id='total"+i+"' name='total[]'/></td></tr>";
        $('table').append(data);
        i++;
});
</script>

Also refer demo & tutorial for this dynamically add & remove table rows

User · Answer

Please try that    lt script gt    document  ready function        var add     lt tr valign  top  gt  lt th scope  row  gt  lt label for  customFieldName  gt Custom Field lt  label gt  lt  th gt  lt td gt                    add     lt input type  text  class  code  id  customFieldName  name  customFieldName    value    placeholder  Input Name    gt  amp nbsp  amp nbsp  amp nbsp                    add     lt input type  text  class  code  id  customFieldValue  name  customFieldValue    value    placeholder  Input Value    gt  amp nbsp                    add     lt a href  javascript void 0    class  remCF  gt Remove lt  a gt  lt  td gt  lt  tr gt             addCF   click function        customFields   append add                customFields   on  click    remCF  function            var inx       remCF   index this              tr   eq inx 1  remove                 lt  script gt

User · Answer

There are multiple problems here

Id should be unique in a page
For dynamic elements, you need to use event delegation using .on()

Ex

$(document).ready(function(){
    $("#addCF").click(function(){
        $("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> &nbsp; <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> &nbsp; <a href="javascript:void(0);" id="remCF">Remove</a></td></tr>');
    });

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

});

Demo: Fiddle

See this demo where id properties are removed.

$(document).ready(function(){
    $("#addCF").click(function(){
        $("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="code" name="customFieldName[]" value="" placeholder="Input Name" /> &nbsp; <input type="text" class="code" name="customFieldValue[]" value="" placeholder="Input Value" /> &nbsp; <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');
    });

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

});

User · Answer

document  ready function          Addrow           add   click function          Addrow       rowcount       tbuser td   closest length  function Addrow         rowcount        debugger     var markup     lt tr gt  lt td gt  lt  td gt  lt td gt  lt input type  text  name  stuclass  id  stuclass   gt  lt  td gt  lt td gt  lt select name  Institute  class  Institute     rowcount      gt  lt  select gt  lt  td gt  lt td gt  lt input type  text  name  obtmark  id  obtmark   gt  lt  td gt  lt td gt  lt input type  text  name  totalmark  id  totalmark   gt  lt  td gt  lt td gt  lt input type  text  name  per  id  per   gt  lt  td gt  lt td gt  lt button type  button  id  delete  onclick  deleterow this    gt DELETE lt  button gt  lt  td gt  lt  tr gt            tbuser tbody   append markup          ajax           type   GET           url    Url Action  bindinst    Home             data              dataType   json           success  function  data                debugger                  Institute     rowcount  empty                    Institute     rowcount  append   lt option Value    gt --Select-- lt  option gt                   each data  function  i  result                         Institute     rowcount  append   lt option Value      result Value      gt     result Text     lt  option gt

User · Answer

In addition to the other answers  I d like to improve the removal  to something more generic     this  closest  tr   remove      This would be much better than using   this  parent   parent   remove     because it doesn t depend on the depth of the element  So  the structure of the row becomes much more flexible

[javascript] jQuery append and remove dynamic table row

The answer is

Examples related to javascript

Examples related to jquery

Examples related to html-table

Examples related to tablerow

Examples related to dom-traversal

Tags