How to check if there are no elements/tags inside another element/tag with jQuery

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 table s 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 .

Answer 2

Do you have only one table in the page? Otherwise you are counting all rows in all tables in the page.

To count the rows that way works, you can see my test here: http://jsfiddle.net/2DDZz/

Edit:

As you posted the code, I see that you are only checking the number of rows when the page loads. You should check it each time that you have removed a row:

$('td > a').click(function(e){
  var this_elem = $(this);
  if( this_elem.hasClass("remove") ){
    this_elem.parent().parent().remove();

    if( $("tbody > tr").length === 0 ){
      alert("No more rows of products...");
    }

  }
  return false;
});

Answer 3

You haven't provided much information for us, but my first guess is that your JQuery selector looks for rows in ANY table on your page. It's possible that if you have any other tables in your page, those rows are being counted too. What you need to do is make your JQuery selector more specific. For example:

if( $(" #myTableName > tbody > tr").length === 0 ){
    alert("No more rows of products...");
}

Notice that I have added an ID to the selector. This tells JQuery to only look for rows in the table with an ID of " myTableName ".

Answer 4

maybe you should look into using nextAll

http://api.jquery.com/nextAll/