title: Delete row from table using JQuery. Please see code
body: <p>I used a code which I got in the net that adds a table row every onclick event. It worked perfect for me until I realized I needed to have an onclick event for every row that when clicked, it will delete the row.</p>
  
  <p>Is there a way for that to happen using my code?</p>
  
  <p>Please see codes below:</p>
  
  <p>Javascript/JQuery code:</p>
  
  <pre><code>&lt;script&gt;
      var counter = 2;            
      function addRow() {
          event.preventDefault();
          var newRow = jQuery('&lt;tr&gt;&lt;td&gt;&lt;label&gt;'+ counter +'&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;textarea name="txtActionStep' + counter + '" style="width:300px; height: 50px; word-wrap:break-word;"&gt;&lt;/textarea&gt;&lt;/td&gt;&lt;td valign="top"&gt;&lt;input type="text" name="txtOwner' +              counter + '"/&gt;&lt;/td&gt;&lt;/tr&gt;');
          counter++;                
          jQuery('table.actionsteps-list').append( newRow );
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;table class="actionsteps-list" width="510"&gt;
     &lt;tr&gt;
         &lt;th colspan="3" align="left"&gt;Action Steps&lt;/th&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
         &lt;td&gt;Step #&lt;/td&gt;&lt;td&gt;Action Step&lt;/td&gt;&lt;td&gt;Owner&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
         &lt;td&gt;&lt;label&gt;1&lt;/label&gt;&lt;/td&gt;
         &lt;td&gt;&lt;textarea name="txtActionStep1" style="width:300px; height: 50px; word-wrap:break-word;"&gt;&lt;/textarea&gt;&lt;/td&gt;
         &lt;td valign="top"&gt;&lt;input type="text" name="txtOwner1" /&gt;&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table width="510"&gt;
     &lt;tr&gt;
         &lt;td align="right"&gt;&lt;a href="#" title="" onclick="javascript:addRow();"&gt;Add Action&lt;/a&gt;&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Thank you!</p>