Refresh page after delete photo

Question

Hi I have function in javascript where I delete photos from database and from server. It work fine, I delete photo but this photo is still in my browser. I have question. How can I refresh only on javascript side?

 container.addEventListener("click", function(e){
                if(e.target.tagName == 'BUTTON'){
                     var id = e.target.dataset.type;
                   var r = confirm("Are You sure to delete?");
if (r == true) {
    $.ajax({
        type: 'POST',
        url: 'index.php?r=gallery/deletep&name='+id,
        dataType: 'html'
    });
} 
                }
    });

Now I treid to add

location.reload();

after ajax but I don't want to refresh all page. How Can i delete dynamically from browser?

Answer 1

you don't need to reload the whole page to remove the image. Use remove() API from jQuery in the success callback in AJAX call.

   $.ajax({
    type: 'POST',
    url: 'index.php?r=gallery/deletep&name='+id,
    dataType: 'html',
    success: function(response){
       $('img#id').remove();
    }
});

Answer 2

OK in this type of situation you have two options. Either you load contents using AJAX request or remove the element from DOM either using class or id of that element. So what happens is if you have loaded content using AJAX you can load all those contents again after successful deletion of image.

$.ajax({ type: 'POST', url: 'index.php?r=gallery/deletep&name='+id, dataType: 'html', success: function(response) { $(e.target).remove(); } });

OR,

$.ajax({ type: 'POST', url: 'index.php?r=gallery/deletep&name='+id, dataType: 'html', success: function(response) { // use next ajax query to load content on DOM } });