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>