jQuery - Original Image is removed when copying into another div

[Shadows1990]

Hi all. I need some advice on a piece of jQuery I'm writing.

I have one div which is empty when the page loads, and another div which contains a load of images.
Basically what I want to do is: When the user clicks on an image in the second div, it removes everything in the first div and copies itself in there.

My code currently looks like this:

        <div class="image-fader">
        </div>
        <div class="image-chooser"> 
          <ul>
            <li>
              <img src="./resources/images/1.jpg" />
            </li>
            <li>
              <img src="./resources/images/2.jpg" />
            </li>
            <li>
              <img src="./resources/images/3.jpg" />
            </li>
          </ul>
        </div>

And my jQuery:

          $(document).ready(function(){
            $('.image-chooser ul li img').click(function(){
              $('.image-fader').empty();
              $('.image-fader').append(this);
            });
          });

When I click on one of the images, it adds it to the first div fine, but it disappears from the li element it originated from.

Any ideas?

 

[sadbuttrue]

Havn't used jQuery for ages. I'm guessing you need to use .clone() to append a copy rather than the actual object.

 

[Shadows1990]

Havn't used jQuery for ages. I'm guessing you need to use .clone() to append a copy rather than the actual object.

Yep, that did the trick.

My (now working, thanks sadbuttrue!) code:

         $(document).ready(function(){
            $('.image-chooser ul li img').click(function(){
              $('.image-fader').empty();
              $(this).clone().prependTo('.image-fader');
            });
          });