Hide main div when a specific class is not found with plain JavaScript-CodePudding

I am trying to hide the main div ('product-block-list__item product-block-list__item--content size__chart') when the class ('ks-chart-container') is not in the page.

(No jQuery if possible)

Here is the container with ('ks-chart-container').

<div >
  <div >
    <button  data-action="toggle-collapsible" aria-expanded="false" aria-controls="block-template--14697163096134__main-092edfe6-4684-4f51-970d-dfb11469ca43">
      <span >Size chart</span>
      <span ></span>
    </button>
    <div id="block-template--14697163096134__main-092edfe6-4684-4f51-970d-dfb11469ca43"  style="height: 0px;">
      <div >
        <div >
          <div id="KiwiSizingChart" >
            <div >
              <div ></div>
            </div>
            <div ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Here is the container without ('ks-chart-container').

<div >
  <div >
    <button  data-action="toggle-collapsible" aria-expanded="false" aria-controls="block-template--14697163096134__main-092edfe6-4684-4f51-970d-dfb11469ca43">
      <span >Size chart</span>
      <span ></span>
    </button>
    <div id="block-template--14697163096134__main-092edfe6-4684-4f51-970d-dfb11469ca43"  style="height: 0px;">
      <div >
        <div >
          <div id="KiwiSizingChart" ></div>
        </div>
      </div>
    </div>
  </div>
</div>

I tried using:

.ks-chart-container:empty .product-block-list__item.product-block-list__item--content.size__chart { display: none; }

But did not work. (Excuse my coding, I'm a beginner).

CodePudding user response：

Actually, it's not possible to style an element based on its children with CSS.

You can do that using some vanilla Javascript (not jQuery), getting all the elements with the .ks-chart-container class and setting the CSS attribute display: none on its parent element with the .product-block-list__item class:

for (const ksChart of document.querySelectorAll('.ks-chart-container')) {
  ksChart.closest('.product-block-list__item').style.display = 'none';
}

If you don't want to use Javascript, depending the programming language, framework, etc. you're using, check on your template if .ks-chart-container exists and then, display the code or not depending on it. Maybe this is the best option...

CodePudding user response：

You can achieve this by using querySelectorAll method.

Assign a variable using querySelectorAll that uses the ks-chart-container class. If the page contains the class name, you can hide the main div.

If the ks-chart-container class already exists on the page, then you can keep the main div in view.

Run the code snippet below to see this in action. I've added notes in the code to help you understand.

Please let me know if this helps, or if you have questions.

//declare variable for div with class 'ks-chart-container'
var ksChartContainer = document.querySelectorAll('.ks-chart-container');


//declare variable for main div that you want to hide
var mainDiv = document.querySelector('.product-block-list__item.product-block-list__item--content.size__chart')


//this is a function will look for the 'ks-chart-container' div, if the div doesn't exist, it will hide the mainDiv
function hideMainDiv() {
  if (ksChartContainer.length < 1) {
    mainDiv.style.display = 'none'
  } else {
    mainDiv.style.display = 'block'
  }
}

<div >
  <div >
    <button  data-action="toggle-collapsible" aria-expanded="false" aria-controls="block-template--14697163096134__main-092edfe6-4684-4f51-970d-dfb11469ca43">
      <span >Size chart</span>
      <span ></span>
    </button>
    <div id="block-template--14697163096134__main-092edfe6-4684-4f51-970d-dfb11469ca43"  style="height: 0px;">
      <div >
        <div >
          <div id="KiwiSizingChart" ></div>
        </div>
      </div>
    </div>
  </div>
</div>

 <!--The section below is for example purposes-->
<br/><br/><br/>
<div>
  <p>Click button below to run hideMainDiv function. If the "ks-chart-container" class isn't found on the page, the main div will be hidden.</p>
  <button onclick="hideMainDiv()">Click</button>
</div>