title: javascript remove tr from table
body: <p>I saw this question  before but I cannont get it to work.  I have the following code</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var scntDiv = $('#p_scents');
  var i = $('#p_scents tr').size() + 1;
  
  $('#addScnt').click(function() {
      scntDiv.append('&lt;tr&gt;&lt;td&gt; &lt;input type="text" name="model" id="model"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="desc" id="desc"/&gt;&lt;/td&gt;&lt;td&gt; &lt;input type="text" name="price" id="price"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="qty" id="qty"/&gt;&lt;/td&gt;&lt;td&gt;&lt;a href="#" id="remScnt"&gt;Delete&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;');   
      i++;
      return false;
  });
  
  //Remove button
  $(document).on('click', '#remScnt', function() {
      if (i &gt; 2) {
          $(this).closest('tr').remove();
          i--;
      }
      return false;
  });
  </code></pre>
  
  <p></p>
  
  <p>The remove function is not working  Please help  here is the fiddle: <a href="http://jsfiddle.net/scumah/xtyFh/8/" rel="nofollow">http://jsfiddle.net/scumah/xtyFh/8/</a></p>
  
  <p>here is my page code:</p>
  
  <pre><code>{embed="shared/_html_header"}
  {embed="shared/_page_header"}
  
  &lt;style = "text/css"&gt;
  { font-family:Arial; }
  h2 { padding:0 0 5px 5px; }
  h2 a { color: #224f99; }
  a { color:#999; text-decoration: none; }
  a:hover { color:#802727; }
  p { padding:0 0 5px 0; }
  
  input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
  &lt;/style&gt;
  
  
  
  &lt;div id="main_body_content"&gt;
  
  
  
  
  
  &lt;h4&gt;
  &lt;a href="#" id="addScnt"&gt;Add Another Input Box&lt;/a&gt;
  &lt;/h4&gt;
  &lt;table class="dynatable"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Model&lt;/th&gt;
          &lt;th&gt;Description&lt;/th&gt;
          &lt;th&gt;Price&lt;/th&gt;
          &lt;th&gt;Quantity&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody id="p_scents"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;input type="text" name="model" read-only id="model"/&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type="text" name="desc" id="desc"/&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
              &lt;input type="text" name="price" id="price"/&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type="text" name="qty" id="qty"/&gt;
          &lt;/td&gt;
  
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;script type="text/javascript"&gt;
  
  var scntDiv = $('#p_scents');
  var i = $('#p_scents tr').size() + 1;
  
  $('#addScnt').click(function() {
      scntDiv.append('&lt;tr&gt;&lt;td&gt; &lt;input type="text" name="model" id="model"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="desc" id="desc"/&gt;&lt;/td&gt;&lt;td&gt; &lt;input type="text" name="price" id="price"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="qty" id="qty"/&gt;&lt;/td&gt;&lt;td&gt;&lt;a href="#" id="remScnt"&gt;Delete&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;');   
      i++;
      return false;
  });
  
  //Remove button
  $(document).on('click', '#remScnt', function() {
      if (i &gt; 2) {
          $(this).closest('tr').remove();
          i--;
      }
      return false;
  });
  
  &lt;/script&gt;
  
  &lt;/div&gt;
  
  
  &lt;/div&gt;&lt;!--/main_body_content--&gt;
  
  
  
  {embed="shared/_page_footer"}
  </code></pre>