title: Add / Delete Rows from Table
body: <p>I have created a table in Twitter Bootstrap here</p>
  <p>I want to be able to do 2 things with it</p>
  <ol>
  <li><p>Delete rows by pressing delete icon - will delete that row</p>
  </li>
  <li><p>Add a new name by adding text (name) to input field and then pressing &quot;add new row&quot;</p>
  </li>
  </ol>
  <p><strong>DEMO</strong> - <a href="http://jsfiddle.net/qxdz4/2/" rel="nofollow noreferrer">http://jsfiddle.net/qxdz4/2/</a></p>
  <p>Looking for a way to do this with JavaScript / jQuery</p>
  <p>My Code</p>
  <pre><code>&lt;div class=&quot;input-prepend input-append&quot;&gt;&lt;span class=&quot;add-on&quot;&gt;&lt;i class=&quot;icon-picture&quot;&gt;&lt;/i&gt;&lt;/span&gt;
  
  &lt;input class=&quot;span2&quot;
  id=&quot;appendedInputButton&quot; type=&quot;text&quot; placeholder=&quot;Add New Name Here&quot;&gt;
  &lt;button class=&quot;btn&quot; type=&quot;button&quot;&gt;Add New Row&lt;/button&gt;
  &lt;/div&gt;
  &lt;table id=&quot;users&quot; class=&quot;table table-bordered table-condensed&quot;&gt;
  &lt;tr&gt;
      &lt;th&gt;name&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;a href=&quot;#&quot; data-pk=&quot;1&quot;&gt;Mike&lt;/a&gt;
  
      &lt;/td&gt;
      &lt;td class=&quot;taskOptions&quot;&gt; &lt;a href=&quot;#deleteProject&quot; rel=&quot;tooltip&quot; data-toggle=&quot;modal&quot; class=&quot;tip-top&quot;
          data-original-title=&quot;Delete Row&quot;&gt;&lt;i class=&quot;icon-remove&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;a href=&quot;#&quot; data-pk=&quot;2&quot;&gt;John&lt;/a&gt;
  
      &lt;/td&gt;
      &lt;td class=&quot;taskOptions&quot;&gt; &lt;a href=&quot;#deleteProject&quot; rel=&quot;tooltip&quot; data-toggle=&quot;modal&quot; class=&quot;tip-top&quot;
          data-original-title=&quot;Delete Row&quot;&gt;&lt;i class=&quot;icon-remove&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;a href=&quot;#&quot; data-pk=&quot;3&quot;&gt;Mary&lt;/a&gt;
  
      &lt;/td&gt;
      &lt;td class=&quot;taskOptions&quot;&gt; &lt;a href=&quot;#deleteProject&quot; rel=&quot;tooltip&quot; data-toggle=&quot;modal&quot; class=&quot;tip-top&quot;
          data-original-title=&quot;Delete Row&quot;&gt;&lt;i class=&quot;icon-remove&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
   <h3>Notes</h3>
  <ul>
      <li>Clicking the delete button should delete the row</li>
      <li>Typing into the input field and pressing "add new row" button should add a new
          row to the end of the table with the Name filled in</li>
  </ul>