here is my generated html. How do I hide my second hole card?

<div id="cardContainerDealer">
    <div class="card templateDealer">
        <span class="dealerCardFace"></span>
        <span class="dealerCardSuit"></span>
    </div>
<div class="card">
        <span class="dealerCardFace">8</span>
        <span class="dealerCardSuit">♣</span>
    </div>
<div class="card red">
        <span class="dealerCardFace">10</span>
        <span class="dealerCardSuit">♥</span>
    </div>
</div>
</div>

I tried below but not working

 $("#cardContainerDealer:nth-child(2)").hide();

2 Answers

2
empiric On Best Solutions

You are using nth-child wrong. Despite it's naming it matches siblings as childs of an element, so you need to select the class .card as well:

$("#cardContainerDealer .card:nth-child(2)").hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cardContainerDealer">
  <div class="card templateDealer">
    <span class="dealerCardFace"></span>
    <span class="dealerCardSuit"></span>
  </div>
  <div class="card">
    <span class="dealerCardFace">8</span>
    <span class="dealerCardSuit">♣</span>
  </div>
  <div class="card red">
    <span class="dealerCardFace">10</span>
    <span class="dealerCardSuit">♥</span>
  </div>
</div>

1
Community On

Use Jquery eq ref https://api.jquery.com/eq/

$('.card').eq(1).hide()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="cardContainerDealer">
    <div class="card templateDealer">
        <span class="dealerCardFace"></span>
        <span class="dealerCardSuit"></span>
    </div>
<div class="card">
        <span class="dealerCardFace">8</span>
        <span class="dealerCardSuit">♣</span>
    </div>
<div class="card red">
        <span class="dealerCardFace">10</span>
        <span class="dealerCardSuit">♥</span>
    </div>
</div>