Vanilla JS: Add class Baz to all <li> with class Foo if they contain a descendant <div> with class Bar

Would like a vanilla JS solution, ie no jquery etc.

I have several

  • on page with the class Foo.

    Some of these contain a with the class Bar (not as a direct child).

    I want to add the class Baz to any Foo

  • that contains a descendant with class Bar.

    Any assistance would be wonderful. Many thanks!

    This is what I have so far. I am sure the contains syntax is where I am getting this wrong.

    const addClassTo = document.querySelectorAll('').contains('');
    addClassTo.forEach((element) => {element.classList.add('baz');})


    >Solution :

    const addClassTo = Array.from(document.querySelectorAll('')).filter((ele) => ele.querySelector(''))
    addClassTo.forEach((element) => {element.classList.add('baz');})
  • Leave a Reply