Question

我在div中有一个元素是“draggable”jquery ui。我试图删除整个div。我的元素看起来像

<div class="draggable">
    <img ...>
    <div class="delete">CLICK TO DELETE</div>
</div>

它有一个可拖动的事件。我想要它，所以当你点击删除按钮它删除整个div。但它似乎没有用。我已经尝试了$(this).parent/parents.remove，但这些都没有工作，甚至没有返回任何类型的对象（console.log($(this).parent());返回[]）。

我的删除功能看起来像

// Delete Image functionality
    $('.delete').click(function() {

        $this.parent().draggable('disable');

        // Post the DELETE request
        $.get('delete/', { d: '1' , id:photo }, function(data) {
            if (data == "true") {
                $(this).parent().remove();
            } else {
                alert("An error has been encountered, please try again later");
            }
        });
    });

知道发生了什么事吗？

Answer 1

问题是，在$.get的回调中，this设置为jqXHR实例。例如，如果您愿意，可以this.responseText。显然它不再被设置为元素。

您需要为元素指定一个未被覆盖的别名：

$('.delete').click(function() {
    var clicked = this;
    $this.parent().draggable('disable');

    // Post the DELETE request
    $.get('delete/', {d:'1',id:photo}, function(data) {
        if(data == "true") {
            $(clicked).parent().remove();
        }else{
            alert("An error has been encountered, please try again later");
        }
    });
});

还有其他各种方法可以做到：效率最高的是var parent = $(this).parent().draggable('disable')（假设draggable是可链接的，可能是这样）。另一种选择是通过事件的currentTarget属性：

$('.delete').click(function(event) {
    // ...
            $(e.currentTarget).parent().remove();

我认为我给出的版本可能是最明显的为什么这对你不起作用，这就是我选择它的原因。

Answer 2

内部函数内部的“this”与外部作用域中的“this”不同。尝试将“this”存储在另一个变量中，并在外部函数中使用该变量，即：

// Delete Image functionality
    $('.delete').click(function() {

        $this.parent().draggable('disable');
        var that = $(this);

        // Post the DELETE request
        $.get('delete/', {d:'1',id:photo}, function(data) {
            if(data == "true") {
                that.parent().remove();
            }else{
                alert("An error has been encountered, please try again later");
            }
        });
    });

jQuery无法删除父级？

2 个答案: