javascript - jQuery Draggable/Droppable - 删除所有已放置的 'items'

Question

是否可以通过按一个按钮来删除可放置 div 上所有放置的“项目”？

谢谢，LS

$("#wrapper").droppable({
                accept: '.shape',
                drop: function(event, ui) 
                    {
                        $(this).append($(ui.helper).clone());
                        $("#wrapper .shape").addClass("item");
                        $(".item").removeClass("ui-draggable shape");
                        $(".item").draggable({
                            containment: '#wrapper'
                        });
                    }
                });

                 $("#trash").droppable({
                    accept: '.item',
                    drop: function(event, ui) 
                    {
                        $(ui.draggable).remove();
                    }
                });

我创建了一个名为“trash”的 div，因此当项目放入其中时，它们会被删除。我需要与此类似的功能，但是当按下按钮时，它会删除所有放置的形状，而不必将它们拖到垃圾箱 div 上。

Answer 1

只需删除具有 item 类的所有元素即可:

$('#someButton').click(function() {
    $("#wrapper .item").remove();
});

<小时/>

旁注:

您可以这样做，而不是使用 $("#wrapper .shape") 再次选择删除的 .shape 元素

ui.helper.clone() // ui.helper is already a jQuery object
 .appendTo(this)
 .toggleClass("item ui-draggable shape"); 
 .draggable({
      containment: '#wrapper'
 })