Add, delete table row, column with jQuery -

i have trying make functionality adding, cloning , deleting of table row , column. table has 4 columns initially.

<tbody>   <tr>      <td></td>      <td></td>      <td></td>      <td></td>   </tr> </tbody> 

i have made functionality. but, i'm facing issue @ time of adding row. main functionality of adding row have written is:

if there existing row clone last row , add clone row after last row else add row 4 columns 

well, adding 4 columns inside else{}. because, table has 4 columns. should fine. but, problem there options deleting/adding column too. example, if delete column, total number of column 3. if accidentally delete row, try add row again, add a new row 4 columns table has 3 columns. avoid kind of situation, should not add static 4 columns inside else {} but, don't understand how handle issue. please, me fix issue.

****************************update**************************

after seeing solution, think problem not clear you.

(1) well, consider there 4 columns:

(2) after removing column, there 3 columns now:

(3) removing 1 more, there 2 columns now:

(4) now, let's remove rows:

(5) now, let's try add new row:

because, adding 4 fixed columns when there in no row cloning (inside else{}). so, after total number of columns changing, when there no row cloning, can't create new row exact column number.

problematic jquery:

$('body').on('click', '.add-row', function() {       var tr = $(this).parents('.table-content').find('.table tbody tr:last');     if(tr.length > 0) {       var clone = tr.clone();         clone.find(':text').val('');         tr.after(clone);     } else {       $(this).parents('.table-content').find('.table tbody').append('<tr> <td><span class="remove remove-row">x</span></td><td> <input type="text" class="form-control"> </td><td> static element </td><td> static element </td></tr>');     }   }); 

fiddle work

in else section replace:

$(this).closest('.table-content').find('.table tbody').append('<tr> <td><span class="remove remove-row">x</span></td><td> <input type="text" class="form-control"> </td><td> static element </td><td> static element </td></tr>'); 

with following , should good; trick check number of current columns before adding row:

  var cols = $(this).closest('.table-content').find('th').length,       tr0 = $('<tr/>');   tr0.html('<td><span class="remove remove-row">x</span></td><td> <input type="text" class="form-control"> </td>');   for(var i=2; < cols; i++) {     tr0.append('<td> static element </td>')   }   $(this).closest('.table-content').find('.table tbody').append( tr0 ); 

// code goes here    $(document).ready(function() {    // add row    $('body').on('click', '.add-row', function() {      var tr = $(this).parents('.table-content').find('.table tbody tr:last');      if (tr.length > 0) {        var clone = tr.clone();        clone.find(':text').val('');        tr.after(clone);      } else {        var cols = $(this).closest('.table-content').find('th').length,          tr0 = $('<tr/>');        tr0.html('<td><span class="remove remove-row">x</span></td><td> <input type="text" class="form-control"> </td>');        (var = 2; < cols; i++) {          tr0.append('<td> static element </td>')        }        $(this).closest('.table-content').find('.table tbody').append(tr0);        //$(this).closest('.table-content').find('.table tbody').append('<tr> <td><span class="remove remove-row">x</span></td><td> <input type="text" class="form-control"> </td><td> static element </td><td> static element </td></tr>');      }    });      // delete row    $('body').on('click', '.remove-row', function() {      $(this).parents('tr').remove();    });      // add column    $('body').on('click', '.add-col', function() {      $(this).parent().find('.table thead tr').append('<th><input type="text" class="form-control pull-left" value=""> <span class="pull-left remove remove-col">x</span></th>');      $(this).parent().find('.table tbody tr').append('<td>static element</td>');    });      // remove column    $('body').on('click', '.remove-col', function(event) {      // index of parent td among siblings (add 1 nth-child)      var ndx = $(this).parent().index() + 1;      // find td elements same index      $('th', event.delegatetarget).remove(':nth-child(' + ndx + ')');      $('td', event.delegatetarget).remove(':nth-child(' + ndx + ')');    });  });

/* styles go here */    .table-content {    padding: 20px;  }  .remove {    margin-left: 10px;    color: red;  }  .remove:hover {    cursor: pointer;  }  .form-control {    width: 90px;  }

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">      <script src="https://code.jquery.com/jquery-1.11.2.js"></script>      <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>        <div class="table-content">        <button class="btn btn-link add-col">add column</button>        <div class="table-responsive">          <table class="table">            <thead>              <tr>                <th></th>                <th>define</th>                <th>                  <input type="text" class="form-control pull-left" value="property">                  <span class="pull-left remove remove-col">x</span>                </th>                <th>                  <input type="text" class="form-control pull-left" value="feature">                  <span class="pull-left remove remove-col">x</span>                </th>              </tr>            </thead>            <tbody>              <tr>                <td><span class="remove remove-row">x</span></td>                <td>                  <input type="text" class="form-control">                </td>                <td>                  static element                </td>                <td>                  static element                </td>              </tr>            </tbody>          </table>        </div>        <button class="btn btn-link add-row">add row</button>      </div>