查找並顯示一個div

Question

我的div稱爲一個名爲tagdisplay，當我在其中任何一個，他們被克隆到另一個DIV tagselected單擊當我點擊已複製到一個div DIV tagbutton列表的表tagselected我希望它從tagselected刪除並重新出現在tagdisplay。

到目前爲止，我已經設法從tagselected中刪除它們，但是我不能讓它們在tagdisplay中重寫。我正在使用find()但這不起作用...有關如何實現這一目標的任何想法？

感謝

這裏是JSFiddle

這裏是我的html

<div id="tagselected"> </div> 

           <div id="tagsdisplay"> 

     <table> 

    <tr> 

     <td>  <div class="tagbutton">Foo 1</div> </td> 

     <td>  <div class="tagbutton">Foo 2</div> </td> 

     <td>  <div class="tagbutton">Foo 3</div> </td> 

     <td>  <div class="tagbutton">Foo 4</div> </td> 

     <td>  <div class="tagbutton">Foo 5</div> </td> 

    </tr> 

     <tr> 

     <td>  <div class="tagbutton">Foo 6</div> </td> 

     <td>  <div class="tagbutton">Foo 7</div> </td> 

     <td>  <div class="tagbutton">Foo 8</div> </td> 

     </tr> 

      </table>  

      </div> 

這裏是我的javascript

//initiate the var 
var count = 1; 

$('.tagbutton').click(function() { 

//if the number of tags is bellow 4 then do the following 
if(count <= 4){ 

// Create a clone of the tag and put it in the tagselected div 
$(this).clone().appendTo("#tagselected"); 
$(this).hide(); 

// Create an hidden input with the value of the tag selected 
$('<input>').attr({ 
    type: 'hidden', 
    name: 'tag'+count, 
    value: $(this).text(), 
}).appendTo('#query'); 

count++ ;// adds one to the variable counter 

     } 

    }); 

//removes the tag and adds it back to #tagsdisplay  
$("#tagselected").on('click', '.tagbutton', function() { 
       $(this).remove(); 
       $("#tagsdisplay").find(this).show(); //Doesn't work ... 
       count-- ; 
      }); 

Answer 1

砍死解決

// Create a clone of the tag and put it in the tagselected div 
    $(this).clone().appendTo("#tagselected").data('source', this); 
    $(this).hide(); 

然後

//removes the tag and adds it back to #tagsdisplay  
$("#tagselected").on('click', '.tagbutton', function() { 
    $($(this).data('source')).show(); 
    $(this).remove(); 
    count--; 
}); 

演示：Fiddle

Answer 2

嘗試...

//$(this).remove(); // <--get rid of this 
$("#tagsdisplay").append($(this)); // <--and just move your element