only show load more button if there is something to load - php

Question

I added a load more button with the plugin "easy load more" (https://wordpress.org/plugins/easy-load-more/). The button is working great except that it will still show up even if there are no more posts to display. I would like to hide the button if there are no more posts left to load. Does anyone have any suggestions for how I could do this? I've been stumped on this for weeks, I would really appreciate any help!
frontend.js
;(function ($) {
$(document).ready(function() {
$('.elm-button').on('click', function (e) {
e.preventDefault();
var $that = $(this),
url = $that.attr('data-href'),
nextPage = parseInt($that.attr('data-page'), 10) + 1,
maxPages = parseInt($that.attr('data-max-pages'), 10);
$that.addClass('is-loading');
if (url.indexOf('?') > 0) {
url += '&';
} else {
url += '?';
}
url += 'paged=' + nextPage;
$.ajax({
type : 'POST',
url : url,
dataType: 'text'
}).done(function (data) {
$that.removeClass('is-loading');
if ($(elm_button_vars.wrapper).length) {
$(elm_button_vars.wrapper).append($($.parseHTML(data)).find(elm_button_vars.wrapper).addBack(elm_button_vars.wrapper).html());
} else {
console.log('Please update Easy Load More settings with post list wrapper selector.');
}
if ( nextPage == maxPages ) {
$that.remove();
} else {
$that.attr('data-page', nextPage);
}
}).fail(function () {
console.log('Ajax failed. Navigating to ' + url + '.');
window.location.href = url;
});
return false;
});
});
}(jQuery));
and my front-page.php
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 14,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<?php
$i = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part ('front-page-shop'); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</article><?php
} else { // Small posts ?>
<article <?php post_class( 'col-sm-6 col-md-4' ); ?>>
<div class="front-thumbnail-image"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></div>
<a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part ('front-page-shop'); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</article>
<?php
}
$i++;
}?>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) {
load_more_button();
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();

Answer 1

I don't know about that plugin, but on the AJAX Load More Plugin it adds a class of done to the load more button when there are no more posts, so you can hide it with javascript targeting that class. Does this plugin do something similar?