0

在一个页面中，我通过以下代码显示文件夹中的图像缩略图，它们下方有一个链接“删除图像”：

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()。我希望如果用户单击删除图像，则应从其包含文件夹（即 Gallery/thumbs）中删除图像拇指。

函数 Del 是：

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

此功能从页面中删除图像，而不是从文件夹中。它还会删除它们，如果我在第三张图像上删除，它将依次删除，然后是第二个。我想删除图像，只有那些用户单击删除图像

希望大家理解。

4

1 回答 1

0

正如评论 AJAX 中所说，您可以使用从服务器中删除文件。我建议您实现用于从服务器、数据库或文件中删除元素的通用功能 - 无论如何，因为通常您只需要调用一些 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 />'s 属性href中，您应该将链接放入服务器端脚本，这将删除文件。

希望有帮助。

于 2012-05-15T14:25:16.007 回答