How to select parent div element with js

1
votes

This is my html code:

<div class="w-grid-list">
<article class="product_cat-19">
    <div class="w-grid-item-h">
        <a class="w-grid-item-anchor" href="#"></a>
            <div class="w-vwrapper">
                <div class="w-post-elm">
                    <a href="">
                        title1
                    </a>
                </div>
                <div class="w-post-elm">
                    <span class="w-post-elm-before">color code : </span>
                    <span class="sku">228</span>
                </div>
                <div class="w-html">color</div>
            </div>  
    </div>
</article>
<article class="product_cat-19">
    <div class="w-grid-item-h">
        <a class="w-grid-item-anchor" href="#"></a>
            <div class="w-vwrapper">
                <div class="w-post-elm">
                    <a href="">
                        title2
                    </a>
                </div>
                <div class="w-post-elm">
                    <span class="w-post-elm-before">color code : </span>
                    <span class="sku">229</span>
                </div>
                <div class="w-html">color</div>
            </div>  
    </div>
</article>
</div>

<div class="owl-stage">
<div class="owl-item active" style="width: 204px;">
    <article class="product_cat-18">
        <div class="w-grid-item-h">
            <div class="w-hwrapper">
                <div class="w-vwrapper">
                    <div class="w-post-elm">
                        <a href="#"></a></div>
                            <h2 class="w-post-elm">
                                <a href="#">title of product1</a>
                            </h2>
                    <div class="w-post-elm">
                        <span class="Price-amount">140<span class="Price-currencySymbol">$</span></span>
                    </div>
                </div>
            </div>
        </div>
    </article>
</div>
<div class="owl-item active" style="width: 204px;">
    <article class="product_cat-19">
        <div class="w-grid-item-h">
            <div class="w-hwrapper">
                <div class="w-vwrapper">
                    <div class="w-post-elm">
                        <a href="#"></a></div>
                            <h2 class="w-post-elm">
                                <a href="#">title of product2</a>
                            </h2>
                    <div class="w-post-elm">
                        <span class="Price-amount">120<span class="Price-currencySymbol">$</span></span>
                    </div>
                </div>
            </div>
        </div>
    </article>
</div>
</div>

And I want to hide(style display:none) Div Element just with "owl-item" class which it has "article" tag with "product_cat-19" class.

my JavaScript code:

<script>
    // get the heading from the first article
    const product_cat_19 = document.querySelector('.product_cat-19');
    // get its parent, the current article
    const currentArticle = product_cat_19.parentNode.style.display='none';
</script>

this code can not hide "owl-item" class. but hide div with "w-grid-list" class. is there any way to do this with css only or js need? I searched on Google and found only solutions to solve this problem with JavaScript that didn't work properly. any one can help me to edit my code?

2
javascripthtmlselect
Let me know if you need further assistance. – Manuel Abascal

2 Answers

3
votes

You can grab the element, both, with JavaScript & CSS like so:

JavaScript:

const el = document.querySelectorAll('.owl-item .product_cat-19');
el[0].style.display = 'none';

CSS:

.owl-item > .product_cat-19 {
   display: none;
 }
2
votes

querySelector() will match only for the first occurance it finds. You need querySelectorAll() to go through all elements and then check if the parents has (or not) the class you look for :

example : https://codepen.io/gc-nomade/pen/YzXQeyN

for (let e of document.querySelectorAll('.product_cat-19')) {
  var dady = e.parentNode;
  if (dady.classList.contains("owl-item")) {
    dady.style.display = "none";
  }
}
<div class="w-grid-list">
  <article class="product_cat-19">
    <div class="w-grid-item-h">
      <a class="w-grid-item-anchor" href="#"></a>
      <div class="w-vwrapper">
        <div class="w-post-elm">
          <a href="">
                        title1
                    </a>
        </div>
        <div class="w-post-elm">
          <span class="w-post-elm-before">color code : </span>
          <span class="sku">228</span>
        </div>
        <div class="w-html">color</div>
      </div>
    </div>
  </article>
  <article class="product_cat-19">
    <div class="w-grid-item-h">
      <a class="w-grid-item-anchor" href="#"></a>
      <div class="w-vwrapper">
        <div class="w-post-elm">
          <a href="">
                        title2
                    </a>
        </div>
        <div class="w-post-elm">
          <span class="w-post-elm-before">color code : </span>
          <span class="sku">229</span>
        </div>
        <div class="w-html">color</div>
      </div>
    </div>
  </article>
</div>
<div class="owl-stage">
  <div class="owl-item active" style="width: 204px;">
    <article class="product_cat-18">
      <div class="w-grid-item-h">
        <div class="w-hwrapper">
          <div class="w-vwrapper">
            <div class="w-post-elm">
              <a href="#"></a>
            </div>
            <h2 class="w-post-elm">
              <a href="#">title of product1</a>
            </h2>
            <div class="w-post-elm">
              <span class="Price-amount">140<span class="Price-currencySymbol">$</span></span>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>    
  
  <!-- will be hidden -->
  <div class="owl-item active" style="width: 204px;">
  <!-- because of this child -->
    <article class="product_cat-19">
      <div class="w-grid-item-h">
        <div class="w-hwrapper">
          <div class="w-vwrapper">
            <div class="w-post-elm">
              <a href="#"></a>
            </div>
            <h2 class="w-post-elm">
              <a href="#">title of product2</a>
            </h2>
            <div class="w-post-elm">
              <span class="Price-amount">120<span class="Price-currencySymbol">$</span></span>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>
</div>

product2 's parent is hidden, if this is what you looked for. there can be many, it will hide every .owl-item holding a direct child with the class .product_cat-19.

if you want to hide any parent container if it has not the .w-grid-list ,

same way check the class then if(okay){leave it} else { hide it} 

for (let e of document.querySelectorAll('.product_cat-19')) {
 var dady = e.parentNode;
  if (dady.classList.contains("w-grid-list")) {}
  else {
  dady.style.display="none"; 
 }
}
<div class="w-grid-list">
  <article class="product_cat-19">
    <div class="w-grid-item-h">
      <a class="w-grid-item-anchor" href="#"></a>
      <div class="w-vwrapper">
        <div class="w-post-elm">
          <a href="">
                        title1
                    </a>
        </div>
        <div class="w-post-elm">
          <span class="w-post-elm-before">color code : </span>
          <span class="sku">228</span>
        </div>
        <div class="w-html">color</div>
      </div>
    </div>
  </article>
  <article class="product_cat-19">
    <div class="w-grid-item-h">
      <a class="w-grid-item-anchor" href="#"></a>
      <div class="w-vwrapper">
        <div class="w-post-elm">
          <a href="">
                        title2
                    </a>
        </div>
        <div class="w-post-elm">
          <span class="w-post-elm-before">color code : </span>
          <span class="sku">229</span>
        </div>
        <div class="w-html">color</div>
      </div>
    </div>
  </article>
</div>
<div class="owl-stage">
  <div class="owl-item active" style="width: 204px;">
    <article class="product_cat-18">
      <div class="w-grid-item-h">
        <div class="w-hwrapper">
          <div class="w-vwrapper">
            <div class="w-post-elm">
              <a href="#"></a>
            </div>
            <h2 class="w-post-elm">
              <a href="#">title of product1</a>
            </h2>
            <div class="w-post-elm">
              <span class="Price-amount">140<span class="Price-currencySymbol">$</span></span>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>    
  
  <!-- will be hidden -->
  <div class="owl-item active" style="width: 204px;">
  <!-- because of this child -->
    <article class="product_cat-19">
      <div class="w-grid-item-h">
        <div class="w-hwrapper">
          <div class="w-vwrapper">
            <div class="w-post-elm">
              <a href="#"></a>
            </div>
            <h2 class="w-post-elm">
              <a href="#">title of product2</a>
            </h2>
            <div class="w-post-elm">
              <span class="Price-amount">120<span class="Price-currencySymbol">$</span></span>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>
</div>