title: How to delete a parent tr
body: <p><strong>UPDATE 1:</strong></p>
  
  <p>I'm wondering if it has anything to do with the button being within the element which is being deleted, so it would end up deleting the button which does the deleting too?  That might not be the problem, I was just typing that I'm thinking.</p>
  
  <p>I've just tried:</p>
  
  <pre><code>$( "input.btnX" ).click(function(event) {
      alert("test");
  });
  </code></pre>
  
  <p>and I don't get an alert...  Should I be using <code>live</code> or is it <code>on</code> now because the buttons along with the table are dynamically generated.</p>
  
  <p><strong>ORIGINAL QUESTION:</strong></p>
  
  <p>I have a table (dynamically generated, so I won't know how many tr's it has in tbody which looks something like this:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;col1&lt;/td&gt;
              &lt;td&gt;col2&lt;/td&gt;
              &lt;td&gt;&lt;input type="button" class="btnX" name="x" value="x" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;col1&lt;/td&gt;
              &lt;td&gt;col2&lt;/td&gt;
              &lt;td&gt;&lt;input type="button" class="btnX" name="x" value="x" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>How do I delete the parent tr if an x button is clicked?  So in this example, if the bottom x is clicked, it should remove the bottom tr.</p>
  
  <p>I've tried this:</p>
  
  <pre><code>$( "input.btnX" ).click(function(event) {
      $(this).parent('tr').remove();
  });
  </code></pre>
  
  <p>But nothing happens.</p>