Question

我希望用户能够从列表中删除项目而无需重新加载页面，并且使用jQuery / AJAX来执行此操作。但是，使用我当前的代码，div不会被删除。我想我正在穿越，所以不确定问题是什么。

HTML：

<img src="delete.png" onclick="delete_item(<? echo $row_item['id'] ?>);">

使用Javascript：

$(document).ready(function() {
    delete_item=function(item_id){
        var confirmation = confirm('Are you sure you want to remove this item?');
        if (confirmation){
            $.post(
               "../../items.php?id="+item_id+"&i=delete"
            )
            $(this).parent('.item_container').remove();
        }            
        else {
            return false;      
        }

    };  
})

Answer 1

看看这个小提琴：http://jsfiddle.net/BbpWc/9/

我有：

将锚点更改为跨度
在当前上下文中删除了ID，您不需要在其中包含ID。
删除了onclick属性并更改为jQuery单击

Answer 2

您在调用parent()时缺少括号，并且没有传入您正在遍历的DOM节点（jQuery选择器开头的$(this)），因此给出了更新了jQuery：

$(document).ready(function() {
    delete_item = function(item_id,that) {
        var confirmation = confirm('Are you sure you want to remove this item?');
        if (confirmation) {
            //$.post("../../items.php?id=" + item_id + "&i=delete")
            $(that).parent().prev().remove();
        }
        else {
            return false;
        }

    };
});

HTML：

<div class="item_container">
    Item 1
</div>
<div>
    <a href="#" onclick="delete_item(1,this);">Delete 1</a>
</div>

<div class="item_container">
    Item 2
</div>
<div>
    <a href="#" onclick="delete_item(2,this);">Delete 2</a>
</div>

<div class="item_container">
    Item 3
</div>
<div>
    <a href="#" onclick="delete_item(3,this);">Delete 3</a>
</div>

现在似乎有效：JS Fiddle demo。

已编辑以使用jQuery的click()事件，而非使用侵入式内联事件处理程序：

$('a').click(
    function(){
        var i = $(this).index('a') + 1;
        delete_item(i,$(this));
    });

JS Fiddle demo

已编辑注意到，有时候，事情可能会比预期的容易一些：

$('a').click(
    function(){
        $(this).parent().prev('div.item_container').remove().end().remove();
    });

JS Fiddle demo

虽然，诚然，它不像在某个地方的图书馆文件中那样容易重复使用......

已编辑以回应@ roXon关于使用andSelf()方法的评论（下方）：

$('a').click(
    function(){
        $(this).parent().prev('div.item_container').andSelf().remove();
    });

JS Fiddle demo

如何使用onclick链接调用jQuery函数？

2 个答案: