Question

I’m trying to build a blog with a pagination system (ex. 5 articles per page).
Everything is fine with the pagination itself but next to each article I included a “delete” button allowing the admin to remove dynamically (jquery)the related article and its content.
What I want now is to “append” (without refreshing) the first article of the next page when I delete an article, the second when I delete another article, then the third and so on.
I want this to avoid to have a blank page if I keep on deleting articles without refreshing.

I’m actually using php and a mysql database to store data
for paginating I’m using something similar to this
link.

Answer 1

I originally answered on the duplicate, but think that might get deleted, so copying here:

jQuery makes it nice and easy. This assumes you’ve got a php file called ajax/delete-article.php which takes an article id to be deleted as a parameter, and the article id of the last article on the page as a parameter, and returns the HTML of the next article. It also assumes all your articles have the “article” class, and the id “article-230” where 230 is the ID number. I’m sure you can adapt it to your own HTML structure.

$('.article-delete').click(function (event) {
  $(this).closest('.article').remove(); // possibly use a more fancy-looking hide(), and remove on complete?

  var lastArticleId = $('.article').last().attr('id').replace('article-','');
  var thisArticleId = $(this).attr('id').replace('article-','');
  $.get('ajax/next-article.php?last-article=' + lastArticleId + '&article-to-delete=' + thisArticleId ,function (data) {
    $('#article-list').append(data);
  });
  event.preventDefault();
});

Note that this is just a rough example. Will require some improvements for robustness. Its also untested, so it might throw up JS errors everywhere.