delete first row from two table in html using jquery

Question

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.

Answer 1

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>