Onclick delete table row jQuery
<p>I've got a table that I can't seem to delete the rows from no matter what I try.
Its a simple table of 5 columns and a few rows generated from a php/mysql lookup using Json. I'd eventually like to delete the row from the mysql table with the button click but I'm stuck with the "easy" part of deleting the row in jquery.</p>

<p>Here is the code to create my table:</p>

<pre><code>var table = $('&lt;table&gt;&lt;/table&gt;').addClass('tbc');
for (var i = 0; i &lt; json.admin_tables.length; i++) {
var row = $('&lt;tr&gt;&lt;/tr&gt;').addClass('guid').attr('id', i).add('&lt;td&gt;' + json.admin_tables[i].Room + '&lt;/td&gt;&lt;td&gt;' + json.admin_tables[i].time + '&lt;/td&gt;&lt;td&gt;' + json.admin_tables[i].Desk + '&lt;/td&gt;&lt;td&gt;' + i + '&lt;/td&gt;&lt;td&gt;&lt;input type="button" id="'+ i + '" class="delete" value="Delete row ' + i + '"&lt;/td&gt;');
table.append(row);
$('#roomTable').append(table);
} 
</code></pre>

<p>The following code does nothing at all however (no errors in firebug)</p>

<pre><code>$('.delete').click(function() { 
    $(this).closest("tr").remove();
}
</code></pre>

<p>Changing "tr" to "td" will delete the button only and I don't want to have to delete every field individually!</p>
