Cuando haces clic en el botón de reproducción o en la imagen, quiero que ambas imágenes desaparezcan.
Apunté a ambos elementos en la lista de nodos, pero cuando hago clic, solo uno de ellos desaparece. El segundo desaparece solo si hago un segundo clic. Necesito que ambos se vayan al mismo tiempo.
¿Cómo hago clic en cualquiera de las dos imágenes para que desaparezcan?
const clickToPlay = document.querySelectorAll('.one, .two'); console.log("I see both objects: " + Array.prototype.slice.call(clickToPlay)); clickToPlay.forEach((img) => { img.addEventListener("click", function () { this.remove(); }); }); .container { position: relative; } img { max-width: 100%; height: auto; } .play { width: 100px; height: 100px; background: red; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } <div class="container"> <img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b" class="one" alt=""> <div class="play two" alt=""></div> </div>Simplemente puede escuchar el click en el container y luego eliminar las imágenes:
const container = document.querySelectorAll(".container")[0]; container.addEventListener("click", function () { const imgs = container.getElementsByTagName("img"); Array.from(imgs).forEach((img) => img.remove()); });reemplazar this.remove(); con
document.querySelectorAll('.one, .two').forEach((el) => { el.remove(); });o si lo prefieres
clickToPlay.forEach((el) => { el.remove(); });