Table row delete using jquery - php

Question

i have made this code to remove table row :
jQuery('tr#rowAttend1').remove();
HTML :
Three rows with same id .
For example :
<tr id="rowAttend1" ><td>ssss</td></tr>
<tr id="rowAttend1" ><td>ddddd</td></tr>
<tr id="rowAttend1" ><td>ccccc</td></tr>
but
i want all three to be removed
it works fine in all browsers except ie7 ?
Can anybody help me?

Answer 1

<tr id="rowAttend1" ><td>ssss</td></tr>
<tr id="rowAttend2" ><td>ddddd</td></tr>
<tr id="rowAttend3" ><td>ccccc</td></tr>
$('#rowAttend1,#rowAttend2,#rowAttend3').remove();
Change the ids to unique ids and then you can remove the table row
Class example
<tr class="rowAttend1" ><td>ssss</td></tr>
<tr class="rowAttend1" ><td>ddddd</td></tr>
<tr class="rowAttend1" ><td>ccccc</td></tr>
$('.rowAttend1').remove();
This will remove all elements with the class rowAttend

Answer 2

Your ID is not unique please use different ID for like,
<tr id="rowAttend1" ><td>ssss</td></tr>
<tr id="rowAttend2" ><td>ddddd</td></tr>
<tr id="rowAttend3" ><td>ccccc</td></tr>
(OR)
Pass particular eventcatch(e) (i.e) (this) to that javascript function and remove from that this like,
$(this).remove();

Answer 3

some different way try if u like
<table>
<tr><td>one</td> <td><button class="removeTR"> one</button></td> </tr>
<tr><td>two</td> <td><button class="removeTR"> two</button></td> </tr>
<tr><td>three</td> <td><button class="removeTR">three</button></td> </tr>
<tr><td>four</td> <td><button class="removeTR"> four</button></td> </tr>
<tr><td>five</td> <td><button class="removeTR"> five</button></td> </tr>
</table>
$("tr .removeTR").live('click', function() {
$(this).parent().parent().remove();
});
or some thing that gives good smooth row deleting
$("tr .removeTR").live('click', function() {
$(this).parent().parent().fadeOut(1000);
setTimeout(function(){$(this).parent().parent().remove();}, 1000);
});