Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

Cómo ocultar una imagen al pinchar sobre ella

10 de mayo de 2018

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>