Question

Is it possible to remove all dropped ‘items’ on a droppable div by pressing a single button?

Thanks,
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();
                    }
                });

I’ve created a div called trash, so when the items are dropped into this they are removed. I need similar functionality to this but when a button is pressed it removes all of the dropped shapes without having to drag them onto the trash div.

Answer 1

Simply remove all elements with an item class:

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

---

Sidenote:

Instead of selecting the dropped .shape element again with $("#wrapper .shape"), you could do

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