CODEWITHSUNDEEP
jquery
Steve
Steve

Reputation: 4463

Could not hide my third child element with nth-child

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();

Upvotes: 0

Views: 30

Answers (2)

empiric
empiric

Reputation: 7878

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>

Upvotes: 2

Deepak A
Deepak A

Reputation: 1636

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>

Upvotes: 1

Related Questions