How to move li elements from one list to another

Question

Here i am moving the whole li elements from one list to another list.What i need is to select a particular li element from one list and on button click it has to move to another list. Here is my code

$(document).ready(function () {
    $("#add").click(function () {
        $("#list1 li").appendTo('#list2');
    });
});

and

<div>
    <asp:ListView ID="ListView1" runat="server">
        <LayoutTemplate>
            <ul id="list1" class="connectedSortable">
                <asp:PlaceHolder runat="server" id="itemPlaceholder"></asp:PlaceHolder>
            </ul>
        </LayoutTemplate>
        <ItemTemplate>    
            <li class="ui-state-default" ><%# Eval("value") %></li>     
        </ItemTemplate>
    </asp:ListView>

    <asp:ListView ID="ListView2" runat="server">
        <LayoutTemplate>
            <ul id="list2" class="connectedSortable">
                <asp:PlaceHolder runat="server" id="itemPlaceholder"></asp:PlaceHolder>
            </ul>
        </LayoutTemplate>
        <ItemTemplate>    
            <li class="ui-state-highlight" ><%# Eval("value2") %></li>     
        </ItemTemplate>
    </asp:ListView>
    <input id="add" name="add" type="button" value="add" /><br />
</div>

Any suggestion?

Answer 1

Try this: http://jsfiddle.net/jKvZB/2/

list 1:
<ul id="list1">
    <li>hello</li>
    <li>world</li>
</ul>
<br />
list 2:
<ul id="list2">
    <li>goodbye</li>
</ul>

<a href="#" id="listSwap">go</a>


$(document).ready(function() {
    $("#listSwap").click(function() {
        $("#list1 li:nth-child(2)").hide();
        $("#list2").append("<li>"+$("#list1 li:nth-child(2)").html()+"</li>");
    });
});

It's pretty basic, but I'm sure you can work it out from there.

Answer 2

Sounds like a job for last() .

$(document).ready(function () {
    $("#add").click(function () {
        $("#list1 li").last().appendTo('#list2');
    });
});

EDIT: To move a specific item:

$("#list1 li").click(function() {
    $(this).appendTo('#list2');
});

ADDITIONAL EDIT: To make a list item clickable, and then append that item when the Add button is clicked (not tested).

$("#list1 li").click(function() {
    $("list1 li.clicked").removeClass("clicked");
    $(this).addClass("clicked");
});
$("#add").click(function () {
    $("#list1 li.clicked").removeClass("clicked").appendTo('#list2');
});

Answer 3

if you just move a sing li element,you should have a unique attribute for each li element and then use jquery selector function to select one and append to other element.

this may be can help you :

<ul id="list1">
    <li class="ui-state-default 01"> list1-1</li>
    <li class="ui-state-default 02"> list1-2</li>
    <li class="ui-state-default 03"> list1-3</li>
</ul>
<ul id="list2"></ul>

    $("#list1 .01").appendTo($("#list2"));
    or 
    $("#list1 li:last").appendTo($("#list2"));

similar to the Dave's answer.

Answer 4

<script type="text/javascript">
    $(document).ready(function () {
        $(".add").click(function () {
            $(this).appendTo('#list2');
        });
    });
</script>

This will make it so whichever specific li element is clicked is the one that will be moved over. Just make sure the li's have the class "add"