CODEWITHSUNDEEP
jqueryjquery-selectors
Martin
Martin

Reputation: 2953

jQuery "select all except"

I am trying to select the first row of a table. Note: the first row is wrapped in a thead tag, so:

<table>
  <thead>
    <tr>  <!-- first row --> </tr>
  </thead>
  <tbody>
    <tr>  <!-- body --> </tr>
  </tbody>
  <tfoot>
    <tr>  <!-- body --> </tr>
  </tfoot>
</table>

The 'select first row' tip could work if it wasn't for the wrapper tags. This is what I have tried but doesn't work:

 $("*:not(thead)", tableSelector).remove();

I.e., I would like to get rid off both tbody and tfoot selectors using a "not tfoot" selector. Because I want to remove everything else from the table except the <thead> and everything-inside-thead. So basically what I am trying to do is to select everything except thead and what's inside it; intutuively something like :not(thead *) could work, but doesn't.

My workaround is $("tbody, tfoot", tableSelector).remove(); but I would like to learn and understand how to use the opposite (not-selector).

Upvotes: 16

Views: 32625

Answers (6)

Daghash
Daghash

Reputation: 1

I will be like:

$('table thead  tr:first-child')

Upvotes: -1

jacmkno
jacmkno

Reputation: 1317

The ":not" pseudo-selector receives another selector as a parameter, so you can actually remove everything except this and that like this:

$(':not(thead, thead *)', 'table').remove();

You can see it in action here.

This is very similar to what you wrote in your comment, except you didn't use a context (which removed the table node) and you used the children operand which didn't include "everything" inside the thead, but instead included only it's direct children. Removing the children operand ">" excludes all the node's descendants, not only the direct children.

Upvotes: 0

cletus
cletus

Reputation: 625037

Your question isn't exactly clear. To select the first row in a single table:

$("table tr:first")...

or the reverse:

$("table tr:not(:first)")...

will do it but that will break if there's more than one table (it will only select one row even if there are three tables). You can work around that with:

$("table").each(function() {
  $(this).find("tr:first")...
});

You can get all rows not in THEAD with:

$("table > :not(thead) > tr")...

Edit: I think you're over-complicating this. If you want to remove everything except THEAD and its contents, that's relatively simple:

$("table > :not(thead)").remove();

If you want to leave the TBODY and TFOOT elements in place change it to:

$("table > :not(thead) > tr").remove();

Upvotes: 21

Gumbo
Gumbo

Reputation: 655189

If you want to remove any child of a table except thead, try this selector:

table > *:not(thead)

Edit    Since you pointed out that you already have the table in a variable:

$("> *:not(thead)", context)

Upvotes: 0

bobince
bobince

Reputation: 536349

I am trying to select the first row of a table.

Why not use good old DOM?

mytable.rows[0]

Upvotes: 1

tvanfosson
tvanfosson

Reputation: 532435

Using children() on the table selector will select only the direct children. You can filter this using your not selector.

$(tableSelector).children(':not(thead)').remove();

Upvotes: 1

Related Questions