CODEWITHSUNDEEP
javascript
J. Doe
J. Doe

Reputation: 25

Hiding all elements that doesn't have a particular class nested deep in them

In this very webpage, have about 70 elements, all with the class "card".

Some of the about 70 elements holds another element with the class "pro-content", which is nested deep inside them.

In this image you could see 2 elements. One with the "pro-content" class and an one without, from left to right.

My aim is to hide all elements with this "pro-content" class and keep all others that doesn't have it.

Given the elements with "pro-content" are childNodes, I tried to use the following for...of loop:

let cardoo = document.querySelectorAll(".card");

for ( const element of cardoo ) {
    if ( !$(element).hasClass('pro-content') ) {
        element.style.display = "none";
    }
}

Yet, this code doesn't work properly - It deletes all elements, instead just these without the "pro-content" class.

Note: I would have proffered a pure vanilla ES16 solution, especially to practice more of the ES16-DOMapi relations but if there is no other option, I would use a pure jQuery/ES16-jQuery solution.

Upvotes: 1

Views: 308

Answers (4)

zippy dippy
zippy dippy

Reputation: 256

With jQuery

You don't need an explicit loop if you use jQuery's :has() selector.

$(".card:has('.pro-content')").hide();

This will select all .card elements have have a descendant with the pro-content class.

Without jQuery

To do this without a library dependency, use querySelector/All.

for (const card of document.querySelectorAll(".card")) {
  if (!card.querySelector(".pro-content")) {
    card.style.display = "none";
  }
}

Or you can use the native .closest() method like this if you prefer:

for (const pro of document.querySelectorAll(".pro-content")) {
  const card = pro.closest(".card");
  if (card) {
    card.style.display = "none";
  }
}

Though you'll need to patch .closest() into some browsers that don't have it yet.

Upvotes: 0

Frank Wisniewski
Frank Wisniewski

Reputation: 1224

After a look in the source Code i think this oneliner makes the job:

document.querySelectorAll('.pro-content').forEach(el => el.parentNode.parentNode.style.display='none');

Upvotes: 1

Jack Dalton
Jack Dalton

Reputation: 3681

The following snippet should resolve your problem. valid cards (ie having pro content) are turned red in this example, and invalid are turned blue. You can adjust the hit and not-hit classes to your wishes (ie "display:none" or "display:block". Hopefully this solves your issue.

If you have any problems please ask in the comments.

(function($) {
  let cardoo = $('.card')

  cardoo.each(function() {
  	if($(this).find('.pro-content').length !== 0) {
  		$(this).addClass("hit");
     } else {
     $(this).addClass("not-hit");
     }
  });
	
})( jQuery );
.card {
  background: black;
  color: white;
  margin: 5px;
}

.hit {
  background:red;
}

.not-hit {
  background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card"><div class="depeer-we-go"><div class="other_content">x</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="other_content">x</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="other_content">x</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="pro-content">PRO</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="other_content">x</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="other_content">x</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="other_content">x</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="pro-content">PRO</div></div></div>
<div>
<div class="card"><div class="depeer-we-go"><div class="pro-content">PRO</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="other_content">x</div></div></div>

Upvotes: 0

DonovanM
DonovanM

Reputation: 1198

This should do the trick.

$('.card').each((i, el) => {
    if ($(el).find('.pro-content').length) {
        $(el).hide();
    }
})

Upvotes: 0

Related Questions