title: jQuery - Attach a delete button to autoappend script?
body: <p><strong>REVISED CODE AT THE END</strong></p>
  
  <p>I'm very new to jquery, and even though I love it, there's a lot I still need to learn... The code below will append a new row if the user clicks in the one of the existing cells in a row.  That part works fine.  I'm trying to figure out how to also have a [-] button at the end of each row that a user can click on to remove that row in case they make a mistake?  Is that even possible?  </p>
  
  <p><strong>Here's the jquery</strong></p>
  
  <pre><code>$( function(){
          $("#knotes &gt; tbody &gt; tr &gt; td &gt; input").bind('focus', function(){
              var row = $(this).closest("tr").get(0);
              if( row.className.indexOf("clicked")==-1 )
              {       
                      var rowCopy=$(row).clone(true);
                      $(row).closest("tbody").append(rowCopy);
                      row.className+="clicked";
                      var newInput=$("input",rowCopy).get(0);
                      newInput.id="newId";
                      $(newInput).bind('focus',attachAutoCompleteEmployeeValues);
              }
          });
  });
  </code></pre>
  
  <p><strong>Here's the markup</strong></p>
  
  <pre><code>&lt;table width="100%" cellpadding="0" cellspacing="0" id="knotes"&gt;
  &lt;thead bgcolor="#f7f9c9"&gt;
      &lt;td align="center"&gt;&lt;label for="name"&gt;Name&lt;/label&gt;&lt;/td&gt;
      &lt;td align="center" nowrap="nowrap"&gt;&lt;label for="kot"&gt;OT &lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td align="center" nowrap="nowrap"&gt;&lt;label for="kdt"&gt;DT &lt;/label&gt;&lt;/td&gt;
  
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td align="center"&gt;&lt;label for="kbreak"&gt;Bk?&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td align="center"&gt;&lt;label for="kshift"&gt;Shift&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/thead&gt;
  
  &lt;tr&gt;
      &lt;td align="center" class="kac" id="test"&gt;&lt;input type="text" id="kemployee" name="klabor[kemployee][]" /&gt;&lt;/td&gt;
  
      &lt;td align="center"&gt;&lt;input type="text" name="klabor[kot][]"  /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td align="center"&gt;&lt;input type="text" name="klabor[kdt][]"  /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td align="center"&gt;&lt;input type="text" name="klabor[kbreak][]"  /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td align="center"&gt;&lt;input type="text" name="klabor[kshift][]"  /&gt;&lt;/td&gt;
  
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>HERE IS THE REVISED CODE</strong>
  The revised jQuery</p>
  
  <pre><code>$( function(){
          $("#knotes &gt; tbody &gt; tr &gt; td &gt; input").bind('focus', function(){
              var row = $(this).closest("tr").get(0);
              if( row.className.indexOf("clicked")==-1 )
              {       
                      var rowCopy=$(row).clone(true);
                      $(row).closest("tbody").append(rowCopy);
                      row.className+="clicked";
                      var newInput=$("input",rowCopy).get(0);
                      newInput.id="newId";
                      $(newInput).bind('focus',attachAutoCompleteEmployeeValues);
                      $('minus').live(function(){$(this).closest('tr').remove();});
              }
          });
  });
  </code></pre>
  
  <p>The revised markup</p>
  
  <pre><code>&lt;table width="100%" cellpadding="0" cellspacing="0" id="knotes"&gt;
  &lt;thead bgcolor="#f7f9c9"&gt;
      &lt;td align="center"&gt;&lt;label for="name"&gt;Name&lt;/label&gt;&lt;/td&gt;
      &lt;td align="center" nowrap="nowrap"&gt;&lt;label for="kot"&gt;OT &lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td align="center" nowrap="nowrap"&gt;&lt;label for="kdt"&gt;DT &lt;/label&gt;&lt;/td&gt;
  
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td align="center"&gt;&lt;label for="kbreak"&gt;Bk?&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td align="center"&gt;&lt;label for="kshift"&gt;Shift&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/thead&gt;
  
  &lt;tr&gt;
      &lt;td align="center" class="kac" id="test"&gt;&lt;input type="text" id="kemployee" name="klabor[kemployee][]"  /&gt;&lt;/td&gt;
  
      &lt;td align="center"&gt;&lt;input type="text" name="klabor[kot][]" value=""  /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td align="center"&gt;&lt;input type="text" name="klabor[kdt][]" value=""  /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td align="center"&gt;&lt;input type="text" name="klabor[kbreak][]" value=""  /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td align="center"&gt;&lt;input type="text" name="klabor[kshift][]" value="" /&gt;&lt;/td&gt;&lt;td class="minus"&gt;&lt;img src="/images/minus.png" /&gt;&lt;/td&gt;
  
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>