javascript - JQuery:删除当前选择的div

Question

我正在使用 JQuery 的 draggable() 和 droppable() 函数，但在尝试删除当前选定的 DIV 时遇到问题。

每次我将一个对象拖到我的#canvas 上时，一个新的 DIV 会附加到 #canvas 上，并且 .newLetter 类会添加到它。我的 HTML 如下所示:

HTML:

<div id="canvas">
    <div id="trash"></div>
    <div class="newLetter"></div>
    <div class="newLetter"></div>
    <div class="newLetter"></div>
    ...
</div>

一旦在 Canvas 上，我想要将对象拖到“垃圾桶”中并被删除的选项。我只希望删除当前选定的 DIV，但只有删除所有带有 .newLetter 类的元素，我才能让它工作。否则，不会删除任何内容，或删除错误的元素(例如垃圾桶本身或整个 Canvas )。

这是我当前的 JQuery:

// Delete Letters
$("#trash").droppable({
    accept: '.newLetter',
    drop: function(event, ui) {
        $(".newLetter").remove();
    }
});

我已尝试执行以下所有操作，但均无效:

$(this).remove();
$(".newLetter", this).remove();
$(this).sibling().remove();
$(this).parent().remove();
$(this).(".newLetter").remove();
$(this).closest().remove();
$(this).closest().sibling().remove();

我相信我已经用尽了所有的可能性。有什么想法吗？？

Answer 1

在drop event ，您可以使用 ui.draggable

引用拖动的元素引用

$("#trash").droppable({
    accept: '.newLetter',
    drop: function(event, ui) {
        $(ui.draggable).remove();
        //or even ui.draggable.remove(); since ui.draggable is a jQuery object
    }
});