How do I add a Class to Specific Parent Elements ONLY if the Child Container has Content

Question

This may look like a duplicate thread but it is a little more complicated than the ones I have read.

I have dynamic content being pulled into a vue slick carousel, which links with another carousel to act as an anchor navigation (using asNavFor). the other carousel I am linking to has a ton of items (let's go with 30) that are all separated by categories. In my navigation carousel i want to only have buttons for the categories, not for each item (4 categories). the v-for i have created only shows content if it has a categoryName (v-if="categoryName") so out of the 30 slides it is dynamically pulling it only shows 4 (Great!). NOW, i need to hide all the empty slides somehow because i need to keep the index of the slides so that it brings you to the correct slide in the other carousel.

Currently I have:

var anchors = document.querySelectorAll('#anchor-inner')
    var anchorIndex = 0
    var length = anchors.length

    for (; anchorIndex < length; anchorIndex++) {
      if (anchors[anchorIndex].innerHTML.length === 0) {
        console.log('here')
      }
    }

this at least finds the slides that have nothing in it, but now how do i only hide the slides that are "empty"? I need to hide the actual "slick-slide" or even set to have zero width so that it doesn't take up space on my page. Is this even possible to do?

EDIT there is the slick-slide container which adds a child div, followed by my 'anchor-inner" (which is where i have my v-for to create the array) and then my anchor-button that is only shown if it has the category name.

<VueSlickCarousel class="anchor-carousel">
   <div id="anchor-inner" v-for="(id, index) in updatedArray" :key="index">
      <button id="anchor-button" v-if="id.catTitle">{{id.catTitle}}</button>
   </div>
</VueSlickCarousel>

Here is a quick example once the slides are dynamically created

<div class="slick-slide"><div><div class="anchor-inner"><button class="anchor-heading">Category 1</button></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"><button class="anchor-heading">Category 2</button></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"><button class="anchor-heading">Category 3</button></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"><button class="anchor-heading">Category 4</button></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>

Answer 1

Maybe not the best solution but i think you get it because you had some issues in your code :)

 var slickSlide = document.querySelectorAll('.slick-slide'); for (var i = 0; i < slickSlide.length; i++) { if (slickSlide[i].children.length === 0) { slickSlide[i].remove(); } }

EDIT: You have the search for empty divs and remove them until no empty is find because after removing an empty the parent is empty the next time.

In this example i wrapped all slick-slide elments into a .slide-wrapper class

 var slickSlide = document.querySelector('.slide-wrapper').getElementsByTagName('div'); function removeAllEmptys() { var divCount = slickSlide.length; for (var i = 0; i < slickSlide.length; i++) { if (slickSlide[i].children.length === 0) { slickSlide[i].remove(); } } if (divCount !== slickSlide.length) { removeAllEmptys(); } else { return false; } } removeAllEmptys();

This will only keep the .slick-slide elements with the category in it