Question

I am messing around with some code, and I have a list which I have applied the draggable function to, and another div with a drop function.

what I am trying to achieve is when the list element is dropped it is removed from the parent list and added to another list.

here is the code I was playing with:

    <div id='dAvail'>
<ul>
    <li><div class='abox'>1</div></li>
    <li><div class='abox'>2</div></li>
</ul>
</div>
<div id='somewhereToDrop'>
</div>
<div id='newListHere'>
<ul>
</ul>
</div>

the JS:

$(document).ready(function(){
//add the droppable function to the divs in main list
$('#dAvail ul).each(function(){
   $('li>div).draggable();
});

$('#somewhereToDrop').droppable({
   tolerance:'touch',
   drop:function(event,ui){
   //this is where I am having problems.
   //if I do ui.draggable I get an object representing the object I dragged but not 100% how to remove said object from the orginal list to then append to the new one.
   //this is what i tried.
   var t = ui.draggable[0]; //represents the div that i dropped.
   $(t).parent().parent().remove($(t).parent());
   //that is as far as I have gotten as this returns an error


});

if anyone could point out how to get to remove that object from the list it would be great.
I even tried to see if I could do $(t).parent().eq() but that did not work, the idea was to get the list index then remove it like that.

thanks

Answer 1

remove() does not take a parameter. It removes its instance from the DOM. So, really, all you want to do is:

$(t).parent().remove();