Обновить страницу после удаления фото

Question

Привет У меня есть функция в javascript, где я удаляю фотографии из базы данных и с сервера. Он отлично работает, я удаляю фотографию, но эта фотография все еще находится в моем браузере. У меня есть вопрос. Как я могу обновить только на стороне javascript?

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' 
    }); 
} 
       } 
    }); 

Теперь я трейд добавить

location.reload();

после ajax, но я не хочу обновлять всю страницу. Как я могу удалить динамически из браузера?

Answer 1

Вам не нужно перезагружать всю страницу, чтобы удалить изображение. Используйте API remove() из jQuery в обратном вызове успеха в вызове AJAX.

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

Answer 2

ОК в этом типе ситуации у вас есть два варианта. Либо вы загружаете содержимое с помощью запроса AJAX, либо удаляете элемент из DOM с использованием класса или идентификатора этого элемента. Итак, что происходит, если вы загрузили контент с помощью AJAX, вы можете загрузить все это содержимое после успешного удаления изображения.

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

ИЛИ,

$.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 } });