title: Add, delete table row, column with jQuery
body: <p>I have trying to make a functionality for adding, cloning and deleting of table row and column. My table has 4 columns initially. </p>
  
  <pre><code>&lt;tbody&gt;
    &lt;tr&gt;
       &lt;td&gt;&lt;/td&gt;
       &lt;td&gt;&lt;/td&gt;
       &lt;td&gt;&lt;/td&gt;
       &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>I have mostly made the functionality. But, I'm facing an issue at the time of adding row. The main functionality of adding row I have written is:</p>
  
  <pre><code>if there is any existing row
  Clone last Row and add this clone row after the last row
  else
  Add a row with 4 columns
  </code></pre>
  
  <p>Well, I am adding <strong>4 columns</strong> inside <code>else{}</code>. Because, initially my table has <strong>4 columns</strong>. This should be fine. But, the problem is there are options for deleting/adding column too. For example, If anybody delete a column, then <strong>total number of column will be 3</strong>. Then if anybody accidentally delete all the row, then try to add a row again, it will add <strong>a new row with 4 columns</strong> where the <strong>table has now 3 columns</strong>. To avoid this kind of situation, I should not add static 4 columns inside <code>else {}</code> But, I don't understand how to handle this issue. Please, help me to fix this issue. </p>
  
  <p>****************************Update**************************</p>
  
  <p>After seeing some solution, I think my problem is not clear to you. </p>
  
  <p>(1) Well, consider there are 4 columns:
  <img src="https://i.imgur.com/WnUZjSs.png" title="source: imgur.com" /></p>
  
  <p>(2) After removing a column, there will be 3 columns now:
  <img src="https://i.imgur.com/BIYWvDz.png" title="source: imgur.com" /></p>
  
  <p>(3) Removing one more, there are 2 columns now:
  <img src="https://i.imgur.com/niz95lE.png" title="source: imgur.com" /></p>
  
  <p>(4) Now, let's remove all the rows:
  <img src="https://i.imgur.com/EnEWcM6.png" title="source: imgur.com" /></p>
  
  <p>(5) Now, let's try to add a new row:
  <img src="https://i.imgur.com/J700tfb.png" title="source: imgur.com" /></p>
  
  <p>Because, I always <strong>adding 4 fixed columns when there in no row for cloning</strong> (inside <code>else{}</code>). So, <strong>after total number of columns changing, when there is no row for cloning</strong>, it can't create a new row with exact column number.</p>
  
  <p>Problematic jQuery:</p>
  
  <pre><code>$('body').on('click', '.add-row', function() {  
      var tr = $(this).parents('.table-content').find('.table tbody tr:last');
      if(tr.length &gt; 0) {
        var clone = tr.clone();
          clone.find(':text').val('');
          tr.after(clone);
      } else {
        $(this).parents('.table-content').find('.table tbody').append('&lt;tr&gt; &lt;td&gt;&lt;span class="remove remove-row"&gt;x&lt;/span&gt;&lt;/td&gt;&lt;td&gt; &lt;input type="text" class="form-control"&gt; &lt;/td&gt;&lt;td&gt; static element &lt;/td&gt;&lt;td&gt; static element &lt;/td&gt;&lt;/tr&gt;');
      }
    });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/learner73/9dh5Lvb0/3/" rel="nofollow noreferrer">Fiddle Work</a></p>