I am learning Javascript in my localhost with WordPress. I have made a AJAX request with wordpress to get some posts on click. And I could successfully done this job. But the problem is I don't want the load more button if there is no post to load. I want to hide the load more button at that time. But I don't know how can I do that.

Here is my code examples:

PHP code block written in function.php file:

wp_localize_script( 'ajax', 'myAjaxObj', array(
 'url' => admin_url( 'admin-ajax.php' ),
 'nonce' => wp_create_nonce( 'ajax' ),
 'posts' => json_encode( $ajaxposts->query_vars ),
 'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
 'max_page' => $ajaxposts->max_num_pages
) );
function get_ajax_posts() 
 //global $ajaxposts;
 check_ajax_referer('ajax', 'security');
 $paged = $_POST['page'];
 $args = array(
 'post_type' => 'post',
 'post_status' => 'publish',
 'posts_per_page' => 2,
 'paged' => $paged
 );
 $the_query = new WP_Query($args);
 //$ajaxposts = new WP_Query($args);
 //print_r($ajaxposts->found_posts);

 //$response = '';
 if( $the_query->have_posts() )
 while ( $the_query->have_posts() ) 
 $the_query->the_post();
 //get_template_part( 'template-parts/post/content', get_post_format() );
 ?>
 <h1> <?php the_title(); ?> </h1>
 <p> <?php the_content(); ?> </p>
 <?php
 
 
 //wp_reset_query();
 die();
 //wp_die();

add_action('wp_ajax_get_ajax_posts', 'get_ajax_posts');
add_action('wp_ajax_nopriv_get_ajax_posts', 'get_ajax_posts' );

And these code on my template file:

$args = array(
 'post_type' => 'post',
 'post_status' => 'publish',
 'posts_per_page' => 2,
 'paged' => 1,
 );
 $the_posts = new WP_Query( $args );


 if ( $the_posts->have_posts() ) :

 /* Start the Loop */
 while ( $the_posts->have_posts() ) : $the_posts->the_post();
 ?>
 <h1><?php the_title(); ?></h1>
 <p> <?php the_content(); ?> </p>
 <?php
 endwhile;

This is the javascript code Block

;(function ($) 
 $(document).ready(function () 
 let page = 2;
 $('#loadAjax').click(function () 
 let url = myAjaxObj.url;
 $('#LoadingImage img').css('display', 'block');
 let data = 
 'action': 'get_ajax_posts',
 'query': myAjaxObj.posts,
 'page': page,
 'security': myAjaxObj.nonce
 ;
 $.post(url, data, function (response) 
 $('.site-main').append(response);
 page++;
 $('#LoadingImage img').css('display', 'none');
 );
 );
 );
)(jQuery);