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

在删除图像上我正在调用一个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中所述，从服务器删除文件phisicaly。我建议你实现从服务器，数据库或文件中删除元素的常用功能 - 无论如何，因为一般来说你只需要调用一些url，使用要删除的对象的id传递，然后 - 转换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 />的属性href中，您应该将链接放到服务器端脚本中，这将删除该文件。

希望有所帮助。

使用javascript函数删除图像

1 个答案: