ajax调用，在返回值中检查div

I have a load more button and the call on click looks like this:

$(document).ready(function(){
    var pageIndex = 1;
    $('#loadmorebuilds-div').click(function() {
        $('#buildcontainer').imagesLoaded( function(){
        $.ajax({
           url: 'includes/loadmorebuilds.php?type=trending&pageIndex=' + pageIndex,
           success: function(html) {
              var el = jQuery(html);
              jQuery("#buildcontainer").append(el).masonry( 'reload' );
              $("#loadmorebuilds-div").stop().fadeOut();
              pageIndex++;
              $("#buildcontainer").masonry()

              rowCount = el.find('#countvar').length;
              if (rowCount <= 7) {
                $("#loadmorebuilds-div").remove();
              }
           }

        });

    });

});
});

The loadmore.php selects rows from the database with a limit of 8. I do a rowcount of the results to check how many there are being sent back and echo these (for testing) and i can see it correctly e.g. 8,8, and then 5 when there is only 5 results etc.

As well the database results being echoed out into how i want them presented, i also output a div with the rowcount e.g.

<div id='countvar'><?php echo $ammountofresults ?></div>

As you can see i want to try and remove the loadmore button from the DOM if the div 'countvar' has a value of 7 or less.

rowCount = el.find('#countvar').length;
if (rowCount <= 7) {
   $("#loadmorebuilds-div").remove();
}

But no matter how many results the div is always removed. I could set the rowCount >= 1 and it will still remove the loadmore button even if the countvar div contains '8'.

Any help on this?

In JS the .length() returns the number of characters there are in the object. Example:

<div>1111</div> - Will return always 4.

Instead of

rowCount = el.find('#countvar').length;
if (rowCount <= 7) {
   $("#loadmorebuilds-div").remove();
}

try

rowCount = $("#countvar").html(); /* Will return the code inside that object, or the num rows*/
if (rowCount <= 7) {
   $("#loadmorebuilds-div").remove();
}