A problem with using .remove()

A problem with using .remove()



Hi

I've written a bit of code that opens a stack of images using append() - each image should have a click function assigned to it using .remove() so that it will close when it's clicked - however, only the image on top of the stack closes when it's clicked !

here's the page - the code is commented http://jojojojojo.com/index.php

has anyone got an idea why this isn't working ?

thanks

  1. the code :  <script type="text/javascript">  
     
     
        
    /////////////////// THE PROJECTS //////////////////////////////////////    
        
        var projets = new Array();
        
        projets[1] = new Array(
          //  Array('Nom Du Fichier Image',largeur,hauteur)
          new Array('p1-3.jpg',440,640),
          new Array('p1-2.jpg',640,440),
          new Array('p1-1.jpg',440,640) // pas de virgule à la fin
        );
        
        projets[2] = new Array(
          new Array('p2-3.jpg',600,500),
          new Array('p2-2.jpg',600,400),
          new Array('p2-1.jpg',590,300)
        );
        
        projets[3] = new Array(
          new Array('p1-3.jpg',440,640),
          new Array('p1-2.jpg',640,440),
          new Array('p1-1.jpg',440,640)
        );    
        
        
    /////////////////// END OF PROJECTS //////////////////////////    
        
            
        $(document).ready(function(){
          
          // get window width
          var winW = $(window).width();
          // get window height     
          var winH = $(window).height();
          // get window mid-point horizontal      
          var midW = Math.floor(winW/2);
          // get window mid-point vertical
          var midH = Math.floor(winH/2);
             
          $('.opener-link').click(function(){
            
            // remove all existing open images
            $('.image-stack').remove();
            
            // get the project Id from the rel attribute        
            var projId = $(this).attr("rel");
            
            //loop through the array                                 
            for(var i=1;i<=projets[projId].length;i++){
              
              // subtract 1 to get the first element in the array
              var n = i-1;
              
              // calculate offset for left side of image for centering
              var leftOffset = midW-Math.floor(projets[projId][n][1]/2);
              
              // calculate offset for top of image for centering
              var topOffset = midH-Math.floor(projets[projId][n][2]/2);
              
              // append image objects to frame
              $('#frame').append('<img id="imageNum'+n+'" src="images/' + projets[projId][n][0] + '" class="image-stack" style="z-index:'+i+';width:'+projets[projId][n][1]+'px;height:'+projets[projId][n][2]+'px;left:'+leftOffset+'px;top:'+topOffset+'px;" />');
              
              // for each image object assign a click function to remove it
              $("#imageNum"+n).click(function(){
                $("#imageNum"+n).remove();
              });          
            }
            
          });             
        });  
      </script>
     
     
      </head>
      <body>
        <div id="frame">
          <a href="#" id="button1" rel="1" class="opener-link" title="Cliquer pour voir les images"></a>
          <a href="#" id="button2" rel="2" class="opener-link" title="Cliquer pour voir les images"></a>
          <a href="#" id="button3" rel="3" class="opener-link" title="Cliquer pour voir les images"></a>
        </div>
      </body>