How to add and remove a LI from UL with jQuery?
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('itemID_1')'>Item</li>
<li id='itemID_2' ondblclick='removeAttached('itemID_2')'>Item</li>
<li id='itemID_3' ondblclick='removeAttached('itemID_3')'>Item</li>
<li id='itemID_4' ondblclick='removeAttached('itemID_4')'>Item</li>
</ul>
<ul id='non-attached'>
<li id='itemID_5' ondblclick='addAttached('itemID_5')'>Item</li>
<li id='itemID_6' ondblclick='addAttached('itemID_6')'>Item</li>
<li id='itemID_7' ondblclick='addAttached('itemID_7')'>Item</li>
<li id='itemID_8' ondblclick='addAttached('itemID_8')'>Item</li>
</开发者_StackOverflowul>
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?
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/
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");
});
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.
精彩评论