Javascriptでliを追加、削除する

Question

サイドペインと右側サイドペインを残しています。私は左側に追加します（ `最初は左側ペインが空である）と右側から削除したい、右側のリスト（LI）をクリックすると、2つのシナリオ

1. に対処したいと思います。
2. 最初の部分を逆にします。左側の追加されたliをクリックすると、左側から削除する必要があり、右側に追加されます。

私は2番目の部分を行うための任意の手掛かりを持っていない

<div class="left_pane"> 
    <div class="content_left_pane"> 
    <ul data-role="listview" id="left_side_ul"> 
    </ul> 
    </div> 
</div> 

<div class="right_pane"> 
<ul data-role="listview" id="right_side_ul"> 
    <li class="showDetails" id="account-1" onclick="selected_destination($(this).attr('id'))"> 
    <div class="ui-grid-b"> 
     <div class="ui-block-a"><div>[Facility name] A</div><div>[Account]</div></div> 
     <div class="ui-block-b"><div>[Address Line 1]</div><div>[Address Line 2]</div><div>[City],[Statte],[Zip code]</div></div> 
     <div class="ui-block-c"><span class="ui-li-count" style="right: 30%; font-size: 15px;">12</span></div> 
    </div>    
    </li>  
</ul> 
</div> 



<script> 
function selected_destination(id){ 
     $("#right_side_ul li#"+id+"").clone().prependTo("div.content_left_pane ul#left_side_ul"); 
     $("#right_side_ul li#"+id+"").remove(); 
    } 

    </script> 

以下のように私は、最初のシナリオをしました。最初の部分では、私は現在のIDをonclick関数で送信しているからです。しかし、逆の部分では、左のペインで私はulしか持っていないので、私は第2のシナリオのやり方を知らない。

Answer 1

あなたはHTMLコードでonclickハンドラを直接登録しないことをお勧めします。あなたはjQueryのを使用しているように、このシナリオでは、あなたのために働く必要があります。

HTML：

<div class="left_pane"> 
    <div class="content_left_pane"> 
    <ul data-role="listview" id="left_side_ul"> 
    </ul> 
    </div> 
</div> 

<div class="right_pane"> 
<ul data-role="listview" id="right_side_ul"> 
    <li class="showDetails" id="account-1"> 
    <div class="ui-grid-b"> 
     <div class="ui-block-a"><div>[Facility name] A</div><div>[Account]</div></div> 
     <div class="ui-block-b"><div>[Address Line 1]</div><div>[Address Line 2]</div><div>[City],[Statte],[Zip code]</div></div> 
     <div class="ui-block-c"><span class="ui-li-count" style="right: 30%; font-size: 15px;">12</span></div> 
    </div>    
    </li>  
</ul> 
</div> 

はJavaScript：

$(document).ready(function(){ 
    $('#right_side_ul li').live('click', function(){ 
     $(this).appendTo('#left_side_ul'); 
    }); 

    $('#left_side_ul li').live('click', function(){ 
     $(this).appendTo('#right_side_ul'); 
    }); 
});​ 

がLI要素がdinamicallyているので、私はここにlive()を使用していることに、注意してくださいULに追加されました。

あなたが見ることができるように、右と左のペインの両方のためのJavaScriptコードがほぼ同じで、あなたは1