Cómo ocultar una imagen al pinchar sobre ella

Tengo el siguiente código quisiera saber como puedo ocultar la imagen sobre la que doy click y no la primera como me esta pasando.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style>
        .image_wrapper {
            position:relative;
            width:102px;
            float:left;
            margin:10px;
        }
 
        .image_wrapper .image {
            border:1px solid #ccc;
            width:100px;
            height:100px;
        }
 
         .image_wrapper .add, .image_wrapper .remove {
            position:absolute;
            top:0px;
            opacity:0;
            transition:opacity 0.5s linear;
            -webkit-transition:opacity 0.5s linear;
            cursor:pointer;
            border:0px;
            width:32px;
            height:32px;
        }
 
          .image_wrapper:hover .add, .image_wrapper:hover .remove {
            transition: opacity 0.5s linear;
            -webkit-transition: opacity 0.5s linear;
            opacity: 0.8;
        }
 
        .image_wrapper .add {
            left:0px;
        }
        .image_wrapper .remove {
            right:0px;
        }
 
        #clicked {clear:both;}
    </style>
 
 </head>
<body>
<input type="file" id="files" name="files[]" multiple /><br />
<output id="list-miniatura"></output>
<div id="clicked"></div>
 
<script>
  function handleFileSelect(evt) {
    var files = evt.target.files;
     for (var i = 0, f; f = files[i]; i++) {
 
      if (!f.type.match('image.*')) {
        continue;
      }
 
      var reader = new FileReader();
       reader.onload = (function(theFile) {
        return function(e) {
          var span = document.createElement('span');
          span.innerHTML = ['Nombre: ', escape(theFile.name), ' || Tamanio: ', escape(theFile.size), ' bytes || type: ', escape(theFile.type), '<br /><div class="image_wrapper" id="img1"> <img class="image" id="foto" src="', e.target.result,'" title="', escape(theFile.name), '"/><img src="eliminar_imagen.png" title="eliminar" class="remove"  onClick="borrar(this)"><br />'].join('');
          document.getElementById('list-miniatura').insertBefore(span, null);
 
        };
      })(f);
     reader.readAsDataURL(f);
    }
  }
 
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
 
</body>
<script>    
  function borrar(id) {
        cargarfoto=document.getElementById("foto");
    if (!cargarfoto){
        alert("El elemento selecionado no existe");
    } else {
        $("#img1").remove();
        $("#borrar").remove();  
    }       
  }
 
 </script>
 
</html>