Table row delete using jquery

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?

id's should not be same either make them unique or use class.. — Sudhir Bastakoti, Feb 07 '13 at 11:35

score 1 · Accepted Answer · answered Feb 07 '13 at 11:37

<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

Vinoth Babu · Answer 2 · 2013-02-07T11:48:23.243

1

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();

edited Feb 07 '13 at 11:48

answered Feb 07 '13 at 11:37

Vinoth Babu

6,724
10
36
55

score 0 · Answer 3 · answered Feb 07 '13 at 12:15

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);
});

Table row delete using jquery

3 Answers3