Hide load more button if there are no posts left to load

Question

On my front page I have a load more button that appears after every 15 posts. It works perfectly, the load more button will still show up if there is nothing left to load. When there is nothing left to load, I just have to press the button once and then it disappears. But I would rather just have the load more button not show up at all if there are no posts left to load. Does anyone have any ideas for how I could fix this.

my front-page.php

 <?php get_header(); get_template_part ('post-template/trendingg'); ?> <script> var now=2; // when click start in page 2 jQuery(document).on('click', '#load_more_btn', function () { jQuery.ajax({ type: "POST", url: "<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php", data: { action: 'my_load_more_function', // the name of the function in functions.php paged: now, // set the page to get the ajax request posts_per_page: 15 //number of post to get (use 1 for testing) }, success: function (data) { if(data!=0){ jQuery("#ajax").append(data); // put the content into ajax container now=now+1; // add 1 to next page }else{ jQuery("#load_more_btn").hide(); } }, error: function (errorThrown) { alert(errorThrown); // only for debuggin } }); }); </script> <section id="ajax"><!-- i have to change div to section, maybe a extra div declare --> <?php $the_query = new WP_Query( [ 'posts_per_page' => 15, // i use 1 for testing 'orderby' => 'post_date', 'order' => 'DESC', 'paged' => get_query_var('paged', 1) //page number 1 on load ] ); if ($the_query->have_posts()) { $i = 0; $j = 0; while ($the_query->have_posts()) { $the_query->the_post(); if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?> <div class="row"> <article <?php post_class( 'col-sm-12 col-md-12' ); ?>> <div class="large-front-container"> <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?></a> </div> <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div> <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> <div class="front-page-post-info"> <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> <?php get_template_part( 'includes/front-shop-the-post' ); ?> <?php get_template_part( 'includes/share-buttons' ); ?> <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> </div> </article> </div> <?php } else { // Small posts ?> <?php if($j % 2 === 0){ echo '<div class="row">';} ?> <article <?php post_class( 'col-sm-6 col-md-6' ); ?>> <div class="two-front-container"> <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></a> <div> <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div> <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> <div class="front-page-post-info"> <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> <?php get_template_part( 'includes/front-shop-the-post' ); ?> <?php get_template_part( 'includes/share-buttons' ); ?> <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> </div> </article> <?php $j++; if($j % 2 === 0){ echo '</div>';}?> <?php } $i++; }?> <?php }?> </section> <button id="load_more_btn">Load More Posts</button> <!-- button out of ajax container for load content and button displayed at the bottom --> <?php get_footer(); 

my functions.php

 //FRONT PAGE add_action('wp_ajax_my_load_more_function', 'my_load_more_function'); add_action('wp_ajax_nopriv_my_load_more_function', 'my_load_more_function'); function my_load_more_function() { $query = new WP_Query( [ 'posts_per_page' => $_POST["posts_per_page"], 'orderby' => 'post_date', 'order' => 'DESC', 'paged' => get_query_var('paged', $_POST["paged"]) ] ); if ($query->have_posts()) { $i = 0; $j = 0; while ($query->have_posts()) { $query->the_post(); if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?> <div class="row"> <article <?php post_class( 'col-sm-12 col-md-12' ); ?>> <div class="large-front-container"> <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?></a> </div> <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div> <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> <div class="front-page-post-info"> <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> <?php get_template_part( 'includes/front-shop-the-post' ); ?> <?php get_template_part( 'includes/share-buttons' ); ?> <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> </div> </article> </div> <?php } else { // Small posts ?> <?php if($j % 2 === 0) echo '<div class="row">'; ?> <article <?php post_class( 'col-sm-6 col-md-6' ); ?>> <div class="two-front-container"> <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></a> <div> <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div> <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> <div class="front-page-post-info"> <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> <?php get_template_part( 'includes/front-shop-the-post' ); ?> <?php get_template_part( 'includes/share-buttons' ); ?> <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> </div> </article> <?php $j++; if($j % 2 === 0) echo '</div>'; ?> <?php } $i++; } wp_reset_query(); }else{ return 0; } exit; } 

Answer 1

You have to start considering the total amount of posts you are looping through. If you already reached the total number of posts it means there's nothing else to load though you can just not render the button.

You have to create a kind off pagination system so you know where you are in each case. You need to know what is the number of each post out of the total of posts for the current query, this way you know if you reached the last one.

Check this post where they make use of post_count in queries: https://wordpress.stackexchange.com/questions/74920/post-count-only-shows-the-number-of-results-per-page