Question

I have ten divs with class pcre in a single div whose id is huge.How can I move div(having class=pcre) to last in div(id=huge) on mouseclick with jQuery

I have tried

<div id="huge">
   <div class="pcre">a</div>
    <div class="pcre">b</div>
    <div class="pcre">c</div>
    <div class="pcre">d</div>
    <div class="pcre">e</div>
    <div class="pcre">f</div>
    <div class="pcre">g</div>
    <div class="pcre">h</div>
    <div class="pcre">i</div>
    <div class="pcre">j</div>
    </div>
<script>
  $(".pcre").click(function() {
       $(this).appendTo("#huge");$(this).remove(); 
  });
</script>

But its not working.

Answer 1

You have an extra comma before your function(), and you also don’t need the .remove();

<div id="huge">
   <div class="pcre">a</div>
    <div class="pcre">b</div>
    <div class="pcre">c</div>
    <div class="pcre">d</div>
    <div class="pcre">e</div>
    <div class="pcre">f</div>
    <div class="pcre">g</div>
    <div class="pcre">h</div>
    <div class="pcre">i</div>
    <div class="pcre">j</div>
    </div>
<script>
$(".pcre").click(function(){
$(this).appendTo("#huge"); 
 });</script>​