check if div has xx class to hide and show parent element

Question

I want to hide hide Team B in each class flex-container if class team-zone-wrapper doesn't contain class rpt-zone-item and change the name of of Team A to Teams

Code pen https://codepen.io/KGuide/pen/mdPzvKB

as shown in image

 if ( $('.team-zone-wrapper').children().length > 1 ) { // do something $(this).hide(); }

 .flex-container { display: flex; justify-content: center; border:1px solid brown; margin:15px; }.flex-container > div { /* background-color: #f1f1f1; */ width: 300px; margin: 10px; text-align: center; /* line-height: 75px; */ /* font-size: 30px; */ padding: 10px; border:1px solid #ccc }.rpt-zone-header { background: #f5f5f5; background: #412B1E; background: #E89D5A; color: #fff; text-transform: uppercase; font-size: 17px; padding: 9px; font-weight: 600; border-bottom: 0px solid #ddd; }.rpt-zone-item { background: #f9f9f9; padding: 5px 10px; border-bottom: 1px solid #ddd; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> <div class="rpt-zone-item">Team 5</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> </div> </div> </div> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> </div> </div> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> </div> </div> </div>

In above code hide part is not working i am not able to hide element using

if ( $('.team-zone-wrapper').children().length > 1 ) {
     // do something
   $(this).hide();
}

Answer 1

Single chain using not() and letting jQuery do all the looping internally

 $('.team-zone-wrapper').not(':has(.rpt-zone-item)').hide().siblings().find('.rpt-zone-header').text('TEAMS')

 .flex-container { display: flex; justify-content: center; border:1px solid brown; margin:15px; }.flex-container > div { /* background-color: #f1f1f1; */ width: 300px; margin: 10px; text-align: center; /* line-height: 75px; */ /* font-size: 30px; */ padding: 10px; border:1px solid #ccc }.rpt-zone-header { background: #f5f5f5; background: #412B1E; background: #E89D5A; color: #fff; text-transform: uppercase; font-size: 17px; padding: 9px; font-weight: 600; border-bottom: 0px solid #ddd; }.rpt-zone-item { background: #f9f9f9; padding: 5px 10px; border-bottom: 1px solid #ddd; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> <div class="rpt-zone-item">Team 5</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> </div> </div> </div> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> </div> </div> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> </div> </div> </div>

Answer 2

You can loop through all the elements with .team-zone-wrapper , then check if the length of the children is less than 2 to hide that element:

 $('.team-zone-wrapper').each(function(){ if ($(this).children().length < 2) { $(this).hide(); $(this).siblings('.team-zone-wrapper').find('.rpt-zone-header').text('Teams'); } });

 .flex-container { display: flex; justify-content: center; border:1px solid brown; margin:15px; }.flex-container > div { /* background-color: #f1f1f1; */ width: 300px; margin: 10px; text-align: center; /* line-height: 75px; */ /* font-size: 30px; */ padding: 10px; border:1px solid #ccc }.rpt-zone-header { background: #f5f5f5; background: #412B1E; background: #E89D5A; color: #fff; text-transform: uppercase; font-size: 17px; padding: 9px; font-weight: 600; border-bottom: 0px solid #ddd; }.rpt-zone-item { background: #f9f9f9; padding: 5px 10px; border-bottom: 1px solid #ddd; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> <div class="rpt-zone-item">Team 5</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> </div> </div> </div> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> </div> </div> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> </div> </div> </div>

Answer 3

$('.team-zone-wrapper') is an array. You'll have to loop through each of the team-zone-wrapper

for (elm of $('.team-zone-wrapper')){
  if ( $(elm).children().length == 1 )  $(elm).hide()
}

Even better solution is to actually check if rpt-zone-item element exists. The advantage here is this works even if Team A is empty.

for (elm of $('.flex-container') ){
  for (cElm of $(elm).find('.team-zone-wrapper')){
    if ( $(cElm).children().length == 1 ) {
      $(cElm).hide();
      $(elm).find('.rpt-zone-header:visible').html('Teams')
    }
  }
}