Para lograr lo que quieres, es mucho más simple tener dos clases separadas. No solo puedes manejar más fácilmente el "cambio de color", sino también la eliminación de los elementos, he preparado un ejemplo con dos clases (.seleccionado
y .normal
). Los elementos seleccionados tienen el fondo amarillo y los normales el fondo negro.
Cuando se hace clic en el elemento <figure>
, haciendo toggle
de ambas clases se quita la que tenía y se le deja puesta la otra, con lo que cambia entre amarillo (seleccionado) y negro (normal).
El botón busca todos los elementos seleccionados y los elimina del DOM.
Puedes probar la funcionalidad aquí mismo haciendo clic en el botón Ejecutar, al final del snippet de código.
$(document).ready(function() {
var foto=document.querySelectorAll("figure");
for (var i=0;i<foto.length;i++){
foto[i].addEventListener("click",cambia_color,false);
}
});
function cambia_color(e){
let laFigura;
if (e.target.nodeName == 'FIGURE') laFigura = e.target
else if (e.target.parentNode && e.target.parentNode.nodeName == 'FIGURE') laFigura = e.target.parentNode;
if (laFigura) {
$(laFigura).toggleClass("seleccionado");
$(laFigura).toggleClass("normal");
}
}
function borrarSeleccion() {
$(".seleccionado").remove();
}
figure {
margin: 10px;
padding: 10px;
width: 170px;
float: left;
text-align: center;
}
figcaption {
background: gray;
}
figure.seleccionado {
box-shadow: #FF9 10px 10px 15px 0px;
background: #FF0;
}
figure.normal {
box-shadow: #666 10px 10px 15px 0px;
background: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div">
<figure id="fig1" class="seleccionado">
<img src="https://www.gravatar.com/avatar/101970df46cc6f3ba9a83daae9b54613?s=150&d=identicon&r=PG">
<figcaption>jachguate</figcaption>
</figure>
<figure id="fig2" class="seleccionado">
<img src="https://www.gravatar.com/avatar/b66cdef56ab88b2a8ff1eeb7b5c503c7?s=150&d=identicon&r=PG">
<figcaption>Carlos del juez</figcaption>
</figure>
<figure id="fig3" class="seleccionado">
<img src="https://i.sstatic.net/7UmHim.jpg?s=150&g=1" width="150">
<figcaption>anythingg</figcaption>
</figure>
<figure id="fig4" class="seleccionado">
<img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=150&d=identicon&r=PG">
<figcaption>otra persona</figcaption>
</figure>
<button id="boton" onclick="borrarSeleccion()">Borrar amarillos</button>
</div>
Ojo, que para cambiar el color debes hacer clic a la izquierda o derecha de la foto.
Edición
En una versión anterior de esta respuesta había un bug, ya que el método cambia_color
se disparaba cuando se hacía clic, no solo sobre la figura, sino sobre sus elementos hijos, e incorrectamente se cambiaba la clase de estos (de la imagen y/o de su etiqueta).
Esto provocaba que, al borrar, ya que solo nos basamos en la clase, se borraran algunos de estos elementos, que estaban en figuras que no se borraban y quedaban incompletas.
En esta versión, se inspecciona el tipo de elemento de e.target
y, si no es 'FIGURE'
, se mira hacia arriba, para ver si el padre lo es.
Al final, solamente si se ha encontrado la figura se hace el cambio de clase. Con ello nos aseguramos que solo se borren figuras completas y nunca sus elementos, pues solo estas podrán tener la clase .seleccionado
.