//$(this).parent().parent().remove();

//$(this).parent().parent().remove();

Hello all,

This is my first post and I'm relatively new to JQuery so hope this is not a stupid question. Basically, I want to have some rows in a table that can be deleted by clicking the button which is present on each row.

The code looks like this:
HTML:
                        <table border="0">
<tr> <th></th> <th>Name <em>*</em> </th> <th>Email</th> <th></th> </tr>
<div id="participant">
<tr>
<td>1</td>
<td><input type="text" id="partName" class="required" /></td>
<td><input type="text" id="partEmail"/></td>
<td><input type="button" id="removeButton" value="(-)" /></td>
</tr>
</div>
<div id="participant">
<tr>
<td>2</td>
<td><input type="text" id="partName" class="required" /></td>
<td><input type="text" id="partEmail"/></td>
<td><input type="button" id="removeButton" value="(-)" /></td>
</tr>
</div>
<div id="participant">
<tr>
<td>3</td>
<td><input type="text" id="partName" class="required" /></td>
<td><input type="text" id="partEmail"/></td>
<td><input type="button" id="removeButton" value="(-)" /></td>
</tr>
</div>
<div id="participant">
<tr>
<td>4</td>
<td><input type="text" id="partName" class="required" /></td>
<td><input type="text" id="partEmail"/></td>
<td><input type="button" id="removeButton" value="(-)" /></td>
</tr>
</div>
<tr>
<td>(+)</td>
<td></td>
<td></td>
<td></td>
</tr>

JQuery in header:

<script type="text/javascript">
$(document).ready(function(){
//function to remove the parent part
$("#removeButton").click(function(){
$(this).parent().parent().remove();
});
         }  


The problem is: this works for the first button (first row), but not for the others.

Does anybody have an idea why?

Many thanks in advance,