jquery table count rows always returns value of 1

Question

For some reason every time I try to count the number of rows in a table it always returns 1. I am dynamically adding and removing rows to the table, so I'm starting to think it is just counting the number of rows initially configured in the table. here is the code I'm using.

$(".elementDelRowButton").live ('click', function (event) {

console.log ($(this).closest('table').length);
                  if ($(this).closest('tr').index()!=0) {
                      $(this).parent().parent().remove();
                  }

            });

I have tried using Size, length and other variations, it always returns 1.

here is the HTML

+/-

Thank you everyone.

Answer 1

It could be that there's a tbody in your source surrounding all of your rows. Try this:

console.log($(this).closest('table').find('tr').length);

By the way, the "this.parent().parent().remove()" looks dangerous. You may want to use a selector along with the "closest" function.

Answer 2

console.log ($(this).closest('table').length); just return a jquery set that contains the closest tag "table" ... The set contains one element indeeed , the table itself, as closest return the first parent that match

console.log ($(this).closest('table').children("tr").length should gives the rows count

Answer 3

Thanks everyone.. this worked for my situation:

console.log ($(this).closest('table').find('tr').length);