Question

Item 1

<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

<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.