All these anchor tags have child paragraphs that have child spans.
When the user clicks any anchor, I want to remove the existing grandparent class from that particular anchor.
And if any anchor dosen't have the grandparent class, I want to remove the grandchildren element with grandchild class.
(There are some anchor that doesn't have any class or grandchild nested. I added an example element for that)[In case it matters]
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>As the comments on your answer suggested, you need an event listener. In this event listener, you can use elem.querySelectorAll() to get all grandchildren with the class grandchild, then loop over the elements and remove them.
Also, you can replace the const grandparents = document.querySelectorAll('a') with const grandparents = document.querySelectorAll('.grandparent') to make sure this only happens on tags with the grandparent class.
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>You almost have a solution written in your question.
if any anchor doesn't have the grandparent class, I want to remove the grandchildren element with grandchild class.
else
when the user clicks any anchor, I want to remove the existing grandparent class from that particular anchor.
if (!elem.classList.contains('grandparent')) {
//remove element with the class of 'grandchild';
} else {
// remove element class grandparent
}This snippet can be further simplified.
Here is a solution:
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>