Todas estas etiquetas anchor tienen paragraph secundarios que tienen span secundarios.
Cuando el usuario hace clic en cualquier anchor , quiero eliminar la clase de grandparent existente de esa anchor en particular.
Y si algún anchor no tiene la clase de grandparent , quiero eliminar el elemento de grandchild con la clase de nietos.
( Hay algunas anchor que no tienen ninguna clase ni nieto anidado. Agregué un elemento de ejemplo para eso ) [ En caso de que importe ]
const grandparents = document.querySelectorAll('a');
grandparents.forEach(elem => {
elem.addEventListener('click',()=>{
elem.classList.remove('grandparent');
}
if (!elem.classList.contains('grandparent')) {
//remove element with the class of 'grandchild';
}
})
<a href="#" class="grandparent">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? <span class="grandchild">•</span></p>
</a>
<a href="#" class="grandparent">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? <span class="grandchild">•</span></p>
</a>
<a href="#" class="grandparent">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? <span class="grandchild">•</span></p>
</a>
<a href="#">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? </p>
</a>
Como sugirieron los comentarios en su respuesta, necesita un detector de eventos. En este detector de eventos, puede usar elem.querySelectorAll() para obtener todos los nietos con la clase grandchild , luego recorrer los elementos y eliminarlos.
Además, puede reemplazar const grandparents = document.querySelectorAll('a') con const grandparents = document.querySelectorAll('.grandparent') para asegurarse de que esto solo suceda en etiquetas con la clase de grandparent .
const grandparents = document.querySelectorAll('.grandparent');
grandparents.forEach(elem => {
elem.addEventListener('click', () => {
elem.classList.remove('grandparent');
const gc = elem.querySelectorAll('* > .grandchild');
for (let i = 0; i < gc.length; i++) {
gc[i].remove();
}
})
})
<a href="#" class="grandparent">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? <span class="grandchild">•</span></p>
</a>
<a href="#" class="grandparent">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? <span class="grandchild">•</span></p>
</a>
<a href="#" class="grandparent">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? <span class="grandchild">•</span></p>
</a>
<a href="#">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? </p>
</a>
Casi tienes una solución escrita en tu pregunta.
si algún ancla no tiene la clase de abuelos, quiero eliminar el elemento de nietos con la clase de nietos.
más
cuando el usuario hace clic en cualquier ancla, quiero eliminar la clase de abuelo existente de ese ancla en particular.
if (!elem.classList.contains('grandparent')) {
//remove element with the class of 'grandchild';
} else {
// remove element class grandparent
}
Este fragmento se puede simplificar aún más.
Aquí hay una solución:
const grandparents = document.querySelectorAll('a');
grandparents.forEach(elem => {
elem.addEventListener('click', () => {
if (elem.classList.contains('grandparent'))
elem.classList.remove('grandparent');
else
elem.querySelector('.grandchild')?.remove();
});
});
<a href="#" class="grandparent">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? <span class="grandchild">•</span></p>
</a>
<a href="#" class="grandparent">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? <span class="grandchild">•</span></p>
</a>
<a href="#" class="grandparent">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? <span class="grandchild">•</span></p>
</a>
<a href="#">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? </p>
</a>