CODEWITHSUNDEEP
javascriptjqueryhtml
anto0522
anto0522

Reputation: 672

Find and show a div

I have a table containing a list of divs called tagbutton in a div called tagdisplay , when I click on any of them they are cloned to another div tagselected when I click on a div that has been copied to tagselected I want it do be deleted from tagselected and reappear in tagdisplay.

So far I have managed to delete them from tagselected but I can't make them reapear in tagdisplay. I am using find() but that doesn't work ... Any ideas on how to achieve that ?

Thanks

Here is the JSFiddle

Here is my 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>

Here is my 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-- ;
            });

Upvotes: 0

Views: 66

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

A hacked solution

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

then

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

Demo: Fiddle

Upvotes: 1

JxAxMxIxN
JxAxMxIxN

Reputation: 1731

Try...

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

Upvotes: 0

Related Questions