title: Add/Remove rows dynamically in a table in javascript
body: <p>I want to add/remove rows in a table dynamically. I have javascript function to add and remove the rows. But, I want the delete button beside every single row so that I can delete a particular row. </p>
  
  <p>ANd I want to add a row only if the first row is completely filled.</p>
  
  <p>function to remove row</p>
  
  <pre><code> function removeRowFromTable()
  {
    var tbl = document.getElementById('tblSample');
    var lastRow = tbl.rows.length;
    if (lastRow &gt; 2) tbl.deleteRow(lastRow - 1);
  }
  </code></pre>
  
  <p>function to add rows:</p>
  
  <pre><code>function addRow(tableID) {
  
              var table = document.getElementById(tableID);
  
              var rowCount = table.rows.length;
              var row = table.insertRow(rowCount);
  
              var cell1 = row.insertCell(0);
              var element1 = document.createElement("input");
              element1.type = "text";
              cell1.appendChild(element1);
  
              var cell2 = row.insertCell(1);
              var element2 = document.createElement("input");
              element2.type = "text";
              cell2.appendChild(element2);
          }
  </code></pre>
  
  <p>my table:</p>
  
  <pre><code>&lt;table id="tableId"&gt;
  &lt;tr&gt;&lt;td&gt;Host Name&lt;/td&gt;&lt;td&gt;Directory&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;&lt;input type="button" value="+" onclick="addRow(tableId)"/&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="button" value="-" onclick="removeRowFromTable()"/&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Any help is appreciated! Thanks in Advance!!!</p>