Refresh page after delete photo

问题

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?

回答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();
    }
});

回答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 } });

来源：https://stackoverflow.com/questions/41199573/refresh-page-after-delete-photo