How to delete all rows except first two rows in a HTML table?

Question

This is the code for removing all except first row using jQuery:

$("#tblCustomers").find("tr:not(:first)").remove();

How can I remove all but the first two rows?

Possible duplicate of [jquery selector - exclude first and second](http://stackoverflow.com/questions/10548003/jquery-selector-exclude-first-and-second). I wonder whether any new question is being asked or not on SO — bugwheels94, Dec 08 '16 at 11:25
@ankitbug94 - I'm prepared to agree with you regarding the duplicate. And even if the main thing asked here is about how to select all but two, the other question doesn't answer how to remove them. — smoksnes, Dec 08 '16 at 11:28

score 15 · Answer 1 · answered Dec 08 '16 at 11:22

You can use :gt() to find rows with an index greater than that specified. Try this:

$("#tblCustomers tr:gt(1)").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblCustomers">
    <tr><td>0</td></tr>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
</table>

Note that indexes are zero-based, so index 1 is the second row.

Alternatively you could slice() the elements within the selector:

$("#tblCustomers tr").slice(2).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblCustomers">
    <tr><td>0</td></tr>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
</table>

score 4 · Answer 2 · answered Dec 08 '16 at 11:26

4

You could use the both selectors :not and :nth-child like :

$('#tblCustomers tr:not(:nth-child(-n+2))').remove();

Hope this helps.

$('#tblCustomers tr:not(:nth-child(-n+2))').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblCustomers">
    <tr><td>0</td></tr>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
</table>

answered Dec 08 '16 at 11:26

Zakaria Acharki

66,747
15
75
101

2

This is the most performant solution provided here but does it really matters... :) – A. Wolff Dec 08 '16 at 12:04
@A.Wolff: Is this really more efficient than Roy's `$("#tblCustomers tr:gt(1)")`? (even if it is, it is certainly one of the less readable answers). – iCollect.it Ltd Dec 08 '16 at 12:09
@GoneCoding `:gt()` isn't a CSS selector, so i'd say ya. EDIT: now i think about thead, tbody and tfooter. This solution could not work as expected in some specific cases – A. Wolff Dec 08 '16 at 12:10
1

@A.Wolff: I think I will have to test this style of selector. It seems so complex I would expect Sizzle to not recognise it as CSS runnable (but I may be wrong). Yes you are right that it would not work if the rows were distributed across table subsections. – iCollect.it Ltd Dec 08 '16 at 12:19
@GoneCoding Oh indeed i'm completly wrong because CSS `:not()` only accepts simple selector (unlike jq one) which isn't case of `:nth-child()` so it will still use sizzle and not querySelectorAll. My bad! EDIT: an no, i'm wrong, it can be used in CSS in fact... Sorry for the confusion https://jsfiddle.net/33apeh4a/ – A. Wolff Dec 08 '16 at 12:26

Sagar Rabadiya · Answer 3 · 2016-12-08T13:09:10.100

2

use filter method

$("#tblCustomers tr").filter(function(){
   return $(this).index() > 2;
}).remove();

edited Dec 08 '16 at 13:09

answered Dec 08 '16 at 11:23

Sagar Rabadiya

4,126
1
21
27

1

`.eq()`? All versions of eq() takes parameters – iCollect.it Ltd Dec 08 '16 at 11:27
@Sam is filter efficient – Arun Prasad E S Dec 08 '16 at 11:33
3

@ARUNEdathadan: Filter is very efficient, but `eq()` does not return the index, so this one does not actually work. – iCollect.it Ltd Dec 08 '16 at 11:41
It should be `index()` not `eq()`: `return $(this).index() > 1;` – A. Wolff Dec 08 '16 at 12:06
the value of `index()` is zero-based, so this will delete all except the first 3 rows now. – iCollect.it Ltd Dec 08 '16 at 13:53

score 2 · Answer 4 · answered Dec 08 '16 at 11:25

2

$("#tblCustomers tr").filter(function(index){
   return index >= 2;
}).remove();

The first parameter to a filter is the index position. Return true for the rows you want to delete

answered Dec 08 '16 at 11:25

iCollect.it Ltd

92,391
25
181
202

score 0 · Answer 5 · answered Dec 08 '16 at 11:37

0

May I propose a plain javascript sollution? Itterates the rows backwords and removes them when the counter is greater than 2.

var table = document.getElementById("myTable");
for (var i = table.rows.length; i>0 ; i--) {   //iterate through rows
  if(i>2) {
    row = table.rows[i-1];
    row.parentNode.removeChild(row);
  }
}

<table id="myTable">
  <tr>
    <td>1</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
</table>

answered Dec 08 '16 at 11:37

Theodore K.

5,058
4
30
46

2

Why would you move from something intuitive like `$("#tblCustomers tr:gt(1)").remove();` to 7 lines of code? Just to add maintenance costs and job security? :) – iCollect.it Ltd Dec 08 '16 at 11:44
You're almost right but still I can think of cases where this sollution could be usefull, especially considering that what OP asked may be part of a greater program. – Theodore K. Dec 08 '16 at 11:49
2

Seriously? The OP asked one trivial question and your example is not reusable, so how could this possibly improve a greater program? :) Because of the way it deletes the rows it even has to run the list backwards, adding more maintenance complexity. – iCollect.it Ltd Dec 08 '16 at 11:53

How to delete all rows except first two rows in a HTML table?

5 Answers5