Remove grandchildren with certain class when grandparent is clicked

Question

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';
  }
})


  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? •


  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? •


  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? •


  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum?

Michael M. · Answer

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();
    }
  })
})


  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? •


  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? •


  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? •


  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum?

n-- · Answer

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();
  });
});


  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? •


  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? •


  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum? •


  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, dolorum?

userInfi · Answer

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.

Remove grandchildren with certain class when grandparent is clicked

3 Answers