如何使用jQuery从UL中添加和删除LI？

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/

Answer 2

You don't need to remove the element, you can just call appendTo :

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

Here's a working example . Note that the above code should be placed in a ready event handler, and it removes the need for inline event handlers.

Update based on comments

Because the element is removed from the DOM and reattached somewhere else, it loses the event handler that was bound to it. That means you need to use the jQuery live or delegate methods, which bind event handlers to elements matching the selector now or in the future:

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

Answer 3

First of all, you should avoid writing inline javascript. It makes it harder to debug and maintain your codebase. I recommend that you read the following articles on javascript events:

Quirksmode - Early Event Handlers

Quirksmode - Traditional event registration model

This type of event handling should not be mixed with jQuery. Follow @james-allardice example and try learning how javacript should be used correctly. I recommend that you read the jQuery docs and tutorials here .

Also, if you are in a hurry you could try the more appealing JQuery UI Sortable lists .