Question

I have search all over Stack Overflow site but I can find an answer

The code below is not show any alert when there is no more <tr> in <tbody>, why is that?

I’m sure the below should work but nothing happens:

<script>
  $('td > a').click(function(e){
  var this_elem = $(this);

  if( this_elem.hasClass("remove") ){
    this_elem.parent().parent().remove();
  }

  return false;

 });

 if( $("tbody > tr").length === 0 ){

  alert("No more rows of products...");

 }
</script>

HTML:

<table>
 <tbody>
  <tr>
   <td class="first-td">
    <img src="assets/product-image.jpg" alt="product image" />

    <div class="prod-desc-col">
     <h3>Samsung LE40C580J1 LCD HD 1080p Digital Television, 40 Inch with Built-in Freeview HD, Samsung LE40C580J1 LCD HD 1080p Digital Television, 40 Inch with Built-in Freeview HD</h3>
     <p>Product Code: 1254782</p>
     <p>In stock</p>
    </div>
   </td>
   <td>
    <input type="text" value="1" size="4" />
    <a href="#" title="Update" class="update">Update</a>
    <a href="#" title="Remove" class="remove">Remove</a>
   </td>
  </tr>
 </tbody>
</table>

Answer 1

Because you’re not counting the next rows, you’re counting all rows in the tbody in all the tables in your page.

Given the additional details added to the question, I offer you this:

$('a.remove').click(

function() {
    $(this).closest('tr').remove(); // a slightly more concise form of your own code
    return false;
});

$('table tbody').bind('DOMNodeRemoved', function() {
    var c = $('table tbody tr').length;
    if (c === 1) { // testing against '1' because the count is performed before
                   // the row is actually removed from the DOM.
        alert("The final row is about to go.");
    }
});

JS Fiddle demo.