Haz que las imágenes desaparezcan al hacer clic en JavaScript

¿Alguna vez te has preguntado cómo lograr efectos visuales simples, como hacer desaparecer un elemento de la página con solo tocarlo? Es un truco muy útil para interfaces interactivas.

Para lograr esto, empezamos con la estructura básica. Necesitamos una etiqueta de imagen con un identificador único para poder seleccionarla después:

<img src="imagen.jpg" id="miImagen" style="cursor:pointer;>

Luego, usamos JavaScript para escuchar el evento click y ocultar la imagen inmediatamente cambiando su estilo:

document.getElementById("miImagen").addEventListener("click", function() {
    this.style.display = "none";
});

Ahora, ¿qué pasa si quieres que sea más elegante? Podemos usar CSS para una transición suave de desvanecimiento:

.fade {
    cursor: pointer;
    transition: opacity 0.5s ease;
}
.fade.hidden {
    opacity: 0;
}

Y ajustamos el JavaScript para añadir la clase CSS y esperar a que termine la transición antes de quitarla del flujo:

function makeImagesFadeOnClick(selector) {
    document.querySelectorAll(selector).forEach(img => {
        img.classList.add("fade");
        img.style.cursor = "pointer";

        img.addEventListener("click", function () {
            this.classList.add("hidden");
            setTimeout(() => {
                this.style.display = "none";
            }, 500);
        });
    });
}

Con estas funciones, tienes control total sobre la interacción.