Why doesn't he delete the table?

Question

I have this piece of code

// TR Fading when deleted $('.delete').live('click', function() { $.ajax({ type: 'POST', url: 'history/delete/id/'+$(this).attr('id') }); $(this).closest('tr').fadeOut('slow', function() { $(this).remove(); if($(this).closest('table').find('tbody').is(':empty')) $('#latest').remove(); }); return false; }); 

It starts when I want to delete a table row using the delete button (as shown in the image) image http://aviary.com/viewfull?fguid=433f68f6-d18d-102d-a9f3-0030488e168c&nowatermark=true

It may happen that the table becomes empty from the rows of the table. I want to delete the whole table when this happens, but the table is not deleted. String Code $(this).remove(); works, and this seems to refer to the tr element in this scope because the whole line is deleted, but the next two lines do not work. The table is not deleted.

EDIT

I changed if($(this).closest('table').find('tbody').is(':empty')) to if(!$(this).closest('table').find('tbody').is(':empty')) (exclamation point) to see if he deleted and deleted the whole table, but I checked the table element before and after deleting the last row and got this

image http://rookery9.aviary.com.s3.amazonaws.com/4344000/4344383_4fbd.png

JS says tbody is not empty, google chrome says otherwise. I do not know how to fix this.

Answer 1

The problem is that after removing it, relative selectors such as .closest() will do nothing, since this element does not have a parent anymore. In addition :empty does not work because it contains text nodes , from the documentation :

Select all items that do not have children (including text nodes).

So :empty will not match if there is any white space left (warning or log $("latest tbody").html()) to see what I mean), which almost certainly takes place, the same the most applies to my example below. Instead, you can use :has(tr) to check the table rows and :not() to undo this, for example:

 $('.delete').live('click', function() { $(this).closest('tr').fadeOut('slow', function() { $(this).remove(); $("#latest tbody:not(:has(tr))").parent().remove(); }); return false; }); 

Here you can see a brief demonstration if the :not(:has(tr)) selector does not match anything ... and it will not be there if there is no line without a <tbody> , it will not delete anything.

Answer 2

It seems that remove() and detach() leave some kind of crud after removing the tr element. This is like a space or a string, since the :empty selector also checks text fields, it is not empty at all.

So

 if($('#latest tbody').children().length() < 1) $('#latest').remove(); 

gotta do the trick.

Link: http://jsbin.com/esaye3/2/edit

Update

As Nick Craver mentioned, this behavior is caused by the HTML markup .

<tbody><tr><td>Something</td><td>Anything?</td><td><button class="delete">delete</button></td></tr></tbody>

for example, WILL also works with :empty .

Answer 3

Try changing:

 $(this).remove(); if($(this).closest('table').find('tbody').is(':empty')) $('#latest').remove(); 

To:

 var table = $(this).closest('table'); $(this).remove(); if(table.find('tbody').is(':empty')) table.remove(); 

I think that when you do $(this).closest , you already lost the link to the element, since you just removed it from the DOM.