Question

I am working on a dynamic form, the rows are having parent dropdowns, and when we select a parent it adds new ROWs for number of childs, I have given classes to each child rows. There is option of dynamically adding a parent row, and so on.

So far adding and deleting the parent rows are working fine. I am having trouble removing the last child row

below is a rough idea of how the rows are created, the

  Row 1: <parent> select
  Row 2: -<child> select
  Row 3: -<child> select
  Row 4: - Child Add row / Remove row
  Row 5: <parent> select
  Row 6: -<child> select
  Row 7: - Child Add row / Remove row
  Row 8: Parent Add row / remove row

for better idea here is the screenshot

This table is simple, no nested tables, only 6 columns and 12 rows, the indenting is done via css

Now if I use $('tr.partnumber_2_sub'); in console of firebug, i can see result like

Object[tr.partnumber_2_sub, tr.partnumber_2_sub, tr.partnumber_2_sub]

but when i use $('tr.partnumber_2_sub:last-child'); it output empty object. I want to remove the last child and my guess was to $('tr.partnumber_2_sub:last-child').remove(); but it is not working.

EDIT

Thanks for the answers for the last row, but i realized that my child add row / del row are also having same class on tr. Now i have to remove 2nd last element

EDIT

Okay, i have added extra class on tr of child row, and didnt added it add / del of child so now I can use them separately. changed back the title and accepted the answer.

Than you all

Answer 1

try

$('tr.partnumber_2_sub').last().remove()