Удаление изображений с функцией

Question

яваскрипта на странице, я хочу показать превью изображений из папки, со ссылкой ниже их «Удалить изображение», через этот код:

echo '<li> <a href="Gallery/'.$file.'" rel="lightbox['.$lightbox.']">'; 
echo '<div id="image" ><img src="Gallery/thumbs/'.$file.'" alt="" /><br> 
<a href="javascript:Del();"><font style="font-size:9px">Delete Image</font>'; 
echo '</a></div></a></li>'; 

На Delete Image Я нахожусь вызов функции javascript Del(). Я хочу, чтобы, если пользователь нажимает кнопку «Удалить изображение», палец изображения должен быть удален из его содержащей папки, т. Е. Галереи/больших пальцев.

Функция Del является:

<script type="text/javascript"> 
function Del(){ 
    var image_x = document.getElementById('image'); 
image_x.parentNode.removeChild(image_x); 
} 
</script> 

Эта функция удаляет изображения со страницы, а не из папки. И также удаляет их, как если бы я удалил на третьем изображении, он сначала удалит, а затем второй, в sequnce. Я хочу, чтобы изображения удалялись, только те, на которые пользователь нажимал Удалить изображение

Надеюсь, вы все понимаете.

Answer 1

Вы можете использовать, как сказано в комментарии AJAX, для удаления фишинга файлов с сервера. Советую вам реализовать общую функцию для удаления элементов с сервера, из базы данных или файлов - что угодно, в общем случае вам просто нужно вызвать некоторый url, с переданным идентификатором объекта, который вы хотите удалить, а затем - преобразовать элементы DOM способ показать, что объект успешно удален.

function remove(el, url, callback) { 
    $.post(url, {}, function(response) { 
     // Expect that the response would be in JSON format (PHP - json_encode()) 
     response = $.parseJSON(response); 

     // and in reponse JSON there should be the attibute called 'code', which is detects if the deleting where successfull, 
     // if it's == 0 that's success, if not - error 
     if (response.code == 0) { 
      el.remove(); 

      if (typeof callback == 'function') { 
       callback(response); 
      } 
     } 
    }); 
} 

Это функция, которую необходимо вызвать на стороне сервера. Для того, чтобы использовать его поместить этот код, вы должны также связать триггер на событие щелчка на <a /> , который будет инициировать удаление таким образом:

$(document).on('click', 'a.delete', function(e) { 
    // Do not allow browser go to the link's href 
    e.preventDefault(); 

    // pass, as the first element div, which we need to delete from DOM, 
    // as the second argument - URL from <a /> to server-side script 
    // and third argument is th ecallback function which will remove() function call if the deleting where successfull 
    remove($(this).parents('div:first'), $(this).attr('href'), function(r) { 
     // here put the extra code to modify DOM after successfull delete 
    }); 
}); 

В атрибуте <a /> «s href вы должны поставить ссылку на серверный скрипт , который удалит файл.

Надеюсь, что это поможет.