How to check that there is no more data before the last request?

Question

AJAX

fetch(ajaxurl, {
    method: 'POST',
    body: data,
  })
    .then(res => res.text(), console.log('load'))
    .then(function (html) {

      if (html) {
        let parser = new DOMParser();
        let doc = parser.parseFromString(html, 'text/html');
        let item = doc.querySelectorAll('.grid-item')
        item.forEach(element => {
          aj.append(element)
        });

      } else {
        btn.remove()
      }
      console.log('loaded')
    })
    .catch(err => console.log(err));

I send the data like this in order to load the block with information later, the "load more" button is deleted only if the data has not been received from the server, how can I delete the button even before checking that the data will not be received?

Answer 1

Option 1: check the number of .grid-item and if it is less than the page size, then everything (does not work if the total number of records is a multiple of the page size)
Option 2: return the "load more" button in the ajax response (if there are more pages ) in the handler, remove the button and add it back if it is in the response (instead of clicking in the response, you can use any html element or set the class - the main thing is to use them as a flag for the presence of the next page)