Estoy intentando escribir código JavaScript que aplicará un ícono de marca FA a un día cuando se haga clic si aún no hay una marca allí, y eliminará la marca si la hay. He escrito un código que añade el icono pero no sé cómo eliminarlo
esto es lo que tengo
HTML y JS:
const days = document.getElementsByClassName('day')
for (let i = 0; i < days.length; i++) {
days[i].addEventListener('click', function(e){
const tick = document.createElement('i');
tick.classList = 'fas fa-check-square fa-4x'
this.append(tick);
});
}
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
Echa un vistazo a toggleCLass()`, se encargará de agregar y eliminar las clases por ti.
necesita_saber_ahora
28 de marzo de2021 a las 13:40
Vale, ¿sabes cómo puedo seleccionar el icono anidado del objetivo del evento?
- Robin Bell
28/03/2021 a las 13:49
¿Puedes actualizar tu código en los lugares relevantes para que pueda tener una mejor idea de lo que estás preguntando?
necesita_saber_ahora
28 de marzo de 2021 at 13:53
------------------------------------
Puede verificar si el elemento i ya existe o no; si no existe, cree el elemento y agregue las clases al elemento. Si está presente, elimine el elemento.
Puedes intentarlo de la siguiente manera:
const days = document.getElementsByClassName('day')
for (let i = 0; i < days.length; i++) {
days[i].addEventListener('click', function(e){
if(!this.querySelectorAll('i').length){ // check if i is not exist
const tick = document.createElement('i');
this.append(tick);
tick.classList.add('fas', 'fa-check-square', 'fa-4x'); // add classes
}
else{
var elem = this.querySelector('i');
elem.parentNode.removeChild(elem); // remove i
}
})
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
0
------------------------------------
Puedes intentar agregar la identificación a tu ícono & verifique la identificación para determinar si existe o no.
const days = document.getElementsByClassName('day')
for (let i = 0; i < days.length; i++) {
days[i].addEventListener('click', function(e){
const check_square_icon = `check-square-icon-${i}`
if(document.contains(document.getElementById(check_square_icon))) {
document.getElementById(check_square_icon).remove();
} else {
const tick = document.createElement('i');
tick.id = `check-square-icon-${i}`
tick.classList = 'fas fa-check-square fa-4x'
this.append(tick);
}
})
}
0
------------------------------------
Según tengo entendido, es necesario eliminar la etiqueta <i> si ya se ha agregado. Para hacer esto, verifique la presencia de la etiqueta <div> en la clase actual .día:
if (!this.getElementsByTagName("i").length > 0) { ... }
Si la etiqueta existe, elimínela usando el método removeChild():
this.removeChild(this.getElementsByTagName("i")[0]);
const days = document.getElementsByClassName("day");
for (let i = 0; i < days.length; i++) {
days[i].addEventListener("click", function (e) {
if (!this.getElementsByTagName("i").length > 0) {
const tick = document.createElement("i");
tick.classList = "fas fa-check-square fa-4x";
this.append(tick);
} else {
this.removeChild(this.getElementsByTagName("i")[0]);
}
});
}
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
