Jquery remove dropped element

[everisk]

Hi,

 

I have a draggable and droppable element that when item is dropped on to the area it added some elements. However, I want to be able to remove the dropped element. Below is the sample of my code

 

$('#comparecampaign').droppable({
	drop: function(e, ui) {
		if($firstdrop==0) {
			$(this).empty();
			$firstdrop = 1;
		}
		$id = $(ui.draggable).attr('id');
		$text = $(ui.draggable).attr('text');
		$add = '<div id="comparecontainer'+$id+'"><input type="hidden" name="compare[]" value="'+$id+'" id="compare'+$id+'" />'+$text+'<a href="#" class="tooltip" title="Delete campaign from list" class="removecompare" onClick="removeCompareCampaign(\''+$id+'\');" id="'+$id+'">Del</a></div><br />';
		$(this).append($add);
		function removeCompareCampaign($id) {
			$('#comparecontainer'+$id).remove();
		}
	}
});

 

With the above code, I get removeCompareCampaign in not defined in Firebug. How do I get this working?

 

Thank you.