Move an item from one div to another and back again using jquery

Question

Hello,

<div id=i1><span id=e1>Item 1</span></div>
<div id=i2><span id=e2>Item 2</span></div>

When I click on Item 1 it should be deleted and moved to i2 and when I click on Item 1 again it must go back to i1

Yes, I tried append(), it goes to i2, but on clicking again it does not move back to i1

How do I get to do it.

Thanks Jean

Answer 1

Because the text "Item 1" becomes part on the div(i2).

Answer 2

<script type="text/javascript">
$(function(){

    $("#i1").toggle(function(){
        $("#e1").appendTo("#i2");
    },
    function(){
        $("#e1").appendTo($(this));
    }); 
});
</script>
<div id=i1><span id="e1">Item 1</span></div>
<div id=i2><span id="e2">Item 2</span></div>

This will repeat the actions for the two clicks. For the first click e1 will be appended to i2, for the second click reverse of this happens, and third click it will repeat first click action and so on.

If you want to attach click event to the span then you can do like this

$("#e1").toggle(function(){
        $(this).appendTo("#i2");
    },
    function(){
        $(this).appendTo($("#i1"));
    });

If you have repeating elements then you can give them a class name

<script type="text/javascript">
$(function(){

    $("span.clickspan").toggle(function(){
        $(this).appendTo("#i2");
    },
    function(){
        $(this).appendTo($("#i1"));
    }); 
});
</script>
<div id=i1>
    <span id="e1" class="clickspan">Item 1</span>
    <span id="e2" class="clickspan">Item 1</span>
    <span id="e3" class="clickspan">Item 1</span>
    <span id="e4" class="clickspan">Item 1</span>
    <span id="e5" class="clickspan">Item 1</span>
</div>
<div id=i2><span id="e6">Item 2</span></div>

See a working demo.