Reputation: 285
i have two table in html with same summary value , the code is created server side and i have no access to generate tables with different ids or ...
<table summary='somefreakydummytext'></table>
<table summary='somefreakydummytext'></table>
i want to delete first row from both table , but following code only delete first row from first table
$("table[summary='somefreakydummytext'] tr:first").remove();
i tested
$("table[summary='somefreakydummytext'])
it is returning two table . so how can i delete first row from both table with jquery .
thanks folks.
Upvotes: 4
Views: 8439
Reputation: 115232
The :first
is a jQuery selector which selects first among the selected elements. So use :first-child
pseudo-class selector to get the first child element from the each table.
$("table[summary='somefreakydummytext'] tr:first-child").remove();
$("table[summary='somefreakydummytext'] tr:first-child").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table summary='somefreakydummytext'>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
<table summary='somefreakydummytext'>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
To avoid nested table element use css direct child(>
) selector.
$("table[summary='somefreakydummytext'] > tbody > tr:first-child").remove();
$("table[summary='somefreakydummytext'] > tbody > tr:first-child").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table summary='somefreakydummytext'>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
<table summary='somefreakydummytext'>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
Upvotes: 5