Question

How do i use jQuery to add and remove item from unordered lists?
When i doubleclick on an item in list 1 it should be removed from list 1 and added to list 2
And of course, the other way around as well…

I’ve got the following lists:

<ul id='attached'>
  <li id='itemID_1' ondblclick='removeAttached(&#39;itemID_1&#39;)'>Item</li>
  <li id='itemID_2' ondblclick='removeAttached(&#39;itemID_2&#39;)'>Item</li>
  <li id='itemID_3' ondblclick='removeAttached(&#39;itemID_3&#39;)'>Item</li>
  <li id='itemID_4' ondblclick='removeAttached(&#39;itemID_4&#39;)'>Item</li>
</ul>

<ul id='non-attached'>
  <li id='itemID_5' ondblclick='addAttached(&#39;itemID_5&#39;)'>Item</li>
  <li id='itemID_6' ondblclick='addAttached(&#39;itemID_6&#39;)'>Item</li>
  <li id='itemID_7' ondblclick='addAttached(&#39;itemID_7&#39;)'>Item</li>
  <li id='itemID_8' ondblclick='addAttached(&#39;itemID_8&#39;)'>Item</li>
</ul>

I was thinking something like:

<script type='text/javascript'>")
  function addAttached(i) { $('#non-attached').remove(i); $('#attached').append(i); };")
  function removeAttached(i) { $('#attached').remove(i); $('#non-attached').append(i); };")
</script>")

But i might be pretty off here?

Answer 1

If you want to move things back and forth, your best bet is event delegation:

<ul id='attached'>
    <li id='itemID_1'>Item</li>
    <li id='itemID_2'>Item</li>
    <li id='itemID_3'>Item</li>
    <li id='itemID_4'>Item</li>
</ul>

<ul id='non-attached'>
    <li id='itemID_5'>Item</li>
    <li id='itemID_6'>Item</li>
    <li id='itemID_7'>Item</li>
    <li id='itemID_8'>Item</li>
</ul>

JS

$("#attached").delegate("li", "dblclick", function() {
    $("#non-attached").append(this);
});

$("#non-attached").delegate("li", "dblclick", function() {
    $("#attached").append(this);
});

This will detect a click on an li element which bubbles up to your list. Then it will move the element to the other list.

JSFiddle: http://jsfiddle.net/TYwPU/