We Keep Coding

Remove table rows using jQuery but prevent remove the first row

I am using jQuery to remove table rows - my script works ok but I don't want the button to be able to remove the very first table row. Can anyone suggest how this is done?
$("#remove").click(function(event) {
event.preventDefault();
$("table tr:last").remove();
i++;
});

Try the following:
if ($("table tr").length != 1) {
$("table tr:last").remove();
}

How about
$("tr:last:not(:first)").remove();
You don't need the table selector as all rows are inside tables, but it might be useful to specify the table element from which you want to remove (avoiding side effects if you later would add other tables).
Example: Remove all rows from $table except the first:
$("tr:not(:first)", $table).remove();

You can use gt() and not():
$('table').find('tr:gt(0):last').remove();
This finds all rows with an index greater than 0, gt(0) and selects the last row, :last and then removes that element.
Demo: http://jsfiddle.net/XhtC8/
If you wanted to remove all rows but the first then you can remove :last:
$('table').find('tr:gt(0)').remove();

Try:
$("#remove").click(function(event) {
event.preventDefault();
$("table tr:not(':first')").remove();
i++;
});
Demo here: http://jsfiddle.net/aGukb/

hide tr that has th and colspan

I'm trying to alter the background of "table tr" if it has a "colpan" and if it contains "th" but this below wont work.
$("#mytable tr").contains('th').attr('colspan').hide();
Can you help?'

Try:
$('#mytable tr').filter(
function(){
return $(this).has('th[colspan]').length;
}).hide();
JS Fiddle demo.
Edited to add the .length to the filter, since finding an empty array counts as finding something, in jQuery...sigh.

Try this.
$("#mytable th[colspan]").parent().hide()

Try this code:
$('th[colspan]').parents('tr').hide();

here you go sir:
$('#mytable > tbody > tr> th[colspan]').hide();
that will hide the all th which have colspan attribute from mytable.
please don't forget to vote up.
:)

jQuery nested :eq selector

I'm new to jQuery and I'm trying to select cells in an table. My table have, for example 3 cols with 3 cells each.
So I try to select the first cell of the first row, for example, like this:
$("#table tr:eq(0) td:eq(0)")
But doesn't works! What's the right way to do this ?

Are you sure your table has an ID of table? Or should your selector not have the # in it.
If your table does not have an ID of table and you want to select by tagname, the selector of
$("table tr:eq(0) td:eq(0)");
should work. You can also write it in other ways, such as:
$("table tr:first td:first");
I think the issue might be that you've got an erroneous hash in there though ;)

Try adding this to make sure it's not working (or is)
$("#table tr:eq(0) td:eq(0)").css('background','red').otherStuff();
And does your table have the id table? Try:
$("table tr:eq(0) td:eq(0)").css('background','red').otherStuff();

you could try to use this:
$("#table tr:nth-child(0) td:nth-child(0)")
i didnt test it though.
Edit: nth-child is 1-indexed. so it should be nth-child(1).

jQuery remove range of rows

Let's say I have a table with these rows:
<table>
<tr id="before_dynamic_rows"></tr>
<tr id="after_dynamic_rows"></tr>
</table>
Using jQuery, I insert automatically generated rows (search results) before the after_dynamic_rows row. How can I delete a range of rows, namely - you guess it - the ones between the row with the id before_dynamic_rows and the row after_dynamic_rows? (In order to be able, after having inserted them, to remove them and insert different ones.)
var response = ajax.responseText;
$('#after_dynamic_rows').before(response);
That's how I insert the new rows. Considering the first answer: how can I assign a class to whatever the response text may be?

This answer is based on a literal interpretation of the question with the idea that the only rows which should be removed are those rows that are in between #before_dynamic_rows element and #after_dynamic_rows.
See working version at: http://jsfiddle.net/7wBzd/
var $rows = $("tr");
$("tr:lt("+ $rows.index($("#after_dynamic_rows")) +"):gt("+ $rows.index($("#before_dynamic_rows")) +")").remove();

$("table tr:gt(0)").not("#after_dynamic_rows").remove();
Try it out here.
Note if #after_dynamic_rows is the last row, then you can just do:
$("table tr:gt(0)").not(":last").remove();
or:
$("table tr:gt(0):not(:last)").remove();
...and if there are rows before #before_dynamic_rows, just do:
$("table tr:not(#before_dynamic_rows, #after_dynamic_rows)").remove();

I would assign a class to those added rows to make them easy to select, but you could select all tr children and use the 'not' method to remove the two you want to keep.
$("table tr").not("#before_dynamic_rows").not("#after_dynamic_rows").remove();

Remove Second Row From Table

I would like to remove the second row of my table with jquery.
I have tried:
$("tr:second").remove();
But this unfortunately doesnt work :( Any suggestions?

You need to use
$("tr:eq(1)").remove();
It's zero based, so index 1 is your second row

use nth-child selector
$("table tr:nth-child(2)").remove();

$("tr:eq(1)").remove();
second row has number 1

You can use the ':eq()' selector to achieve this:
// The eq() selector is zero based so the second
// row will be tr:eq(1)
$("tr:eq(1)").remove();
See the documentation at:
http://api.jquery.com/eq-selector/

try $("tr:nth-child(1)").remove()
http://api.jquery.com/nth-child-selector/