how to delete the droppable element in a container

how to delete the droppable element in a container

my coding is here: 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> UI Droppable</title>
<link rel="stylesheet" href="css/jquery.ui.all.css">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.ui.draggable.js"></script>
<script src="js/jquery.ui.resizable.js"></script>
<script src="js/jquery.ui.selectable.js"></script>
<script src="js/jquery.ui.droppable.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.position.js"></script>
<script src="js/jquery-ui-1.10.1.custom.min.js"></script>
<style>
#container{
width:800px;
height:500px;
border:1px solid #000;
}
.placeholder{
width:200px;
height:200px;
background:#eee;
border:1px solid #ccc;
}
div#widgets ul{
list-style:none;
}
</style>
<script>
$(function() {
$( "#widgets .placeholder" ).draggable({
containment: "#container",
});
});
$(function(){
$( "#container" ).droppable( {
acceptClass: ".placeholder",
preventCollision: true,
drop:function(event,ui){
//alert("dropped"); 
}
});
});
$(function() {
$( " li.placeholder" ).resizable({
containment: "#container",
resize: function(event, ui) {
console.log(ui.position.left + ',' + ui.position.top + ' ' + ui.size.width + 'x' + ui.size.height);
$('#placeholder').text('Left:'+ui.position.left + ',Top:' + ui.position.top + 'Width: ' + ui.size.width + 'Height:' + ui.size.height);
}
});
});
//getting position of dragging on the container
$(document).ready(function() {    // sets draggable the elements with id="im"       
$('#widgets .placeholder').draggable({            
cursor: 'move',  
// sets the cursor apperance            
containment: '#container',          
stop : function(){                      
$("#placeholder").text('x-axis :' + $('#widgets .placeholder').offset().left + 'y-axis :' + $('#widgets .placeholder').offset().top);
}
});
});
// subtract the position of dragging on the container
$(function() { // Shorthand for $(document).ready(function() {
      // sets draggable the elements with id="im"
      $(' #widgets.placeholder').draggable({cursor: 'move', containment: '#container', stop: function() {
            var cont = $('.placeholder').offset();
            var img = $(this).offset();
            $('#pos1').text('x-axis :' + (img.left - cont.left) + ', y-axis :' + (img.top - cont.top));
      }});
});


</script>
</head>
<body>


<div id="container">
</div>
<div id="pos1"></div>
<div id="widgets">
<ul>
<li class="placeholder" id="im"><span align="center" id="placeholder">Drag and drop me</span></li>
<li class="placeholder"><span id="placeholder">Drag and drop me</span></li>
<li class="placeholder"><span id="placeholder">Drag and drop me</span></li>
</ul>
</div>


</body>
</html>