Find Child by Class and remove all the elements except the first one

Question

I have a TR row id (myRow) and it has a child table and that table has rows with class ".CONTENTROW". I am using the following code to remove all the rows with class ".CONTENTROW" except the first one. This is the code I am using:

var myRow = $("#" + rowId).next().clone();
$(myRow).find(".CONTENTROW tr:gt(0)").remove();

The above does not seems to be working and does not remove any row. I tried using JSFiddle but JSFiddle is behaving in a strange way and not refreshing.

JSFIDDLE: http://jsfiddle.net/Xt6VQ/1/

Answer 1

$(myRow).find(".CONTENTROW").not(":first").remove();

Answer 2

If the row ID in myRow is not prefixed by a # you'll need to change the selector to:

$('#' + myRow);

As your myRow variable is already jQuery object (as you specified in the comments it's retrieved via var myRow = $("#" + rowId).next().clone();), you can get away with calling myRow.find() directly.

You also need to change your row selector to tr.CONTENTROW:not(:first-child)

What you have currently is matching all elements with a class of CONTENTROW, finding all of their combined descendants that are tr's, and then selecting the first one matched.

For more info, see the :first-child and :gt selector documentation.

So, to conclude;

myRow.find("tr.CONTENTROW:not(:first-child)").remove();