CODEWITHSUNDEEP
javascript
Steve
Steve

Reputation: 4463

How to I remove all the child element except the first element?

It is a BlackJack game. I have a container which the first child element is a template for cloning card purpose. How to I remove all the child elements except the first element? I think the current code which is the "clearContainer" method remove all child elements. 

function makeCardPlayer() {
    // .card is created in the template card css class
    var card = $(".card.templatePlayer").clone();
    
    //card.removeClass("templatePlayer");      
    card.addClass("newCard");              
    $("#cardContainerPlayer").append(card);        
}

function clearContainer() {
    debugger
    //$("cardContainerPlayer > *").slice(1).remove();

    var myNode = document.getElementById("cardContainerPlayer");
    var fc = myNode.firstChild;
    var sib = fc && fc.nextSibling;
    while (myNode.lastChild && myNode.lastChild !== sib) {
        myNode.removeChild(myNode.lastChild);
    }
}

makeCardPlayer();    
clearContainer();
#cardContainerPlayer {
        display: flex;
        flex-wrap: wrap;
    }

    .card {
        display: inline-block;
        vertical-align: top; 
        text-align: center;
        margin: 5px;
        padding: 10px;
        width: 70px;
        height: 100px;
        font-size: 26px;
        background-color: black;
        border: solid 1px black;
        color: white;
        border-radius: 10px;
    }

    .newCard {
        display: inline-block;
        vertical-align: top;
        text-align: center;
        margin: 5px;
        padding: 10px;
        width: 70px;
        height: 100px;
        font-size: 26px;
        background-color: yellow;
        border: solid 1px black;
        color: white;
        border-radius: 10px;
    }

    .templatePlayer {
        /*display: none;*/
    }
<!DOCTYPE html>
<html>

<body>
  <div id="cardContainerPlayer">
    <div class="card templatePlayer">
      <span class="playerCardFace"></span>
      <span class="playerCardSuit"></span>
    </div>
  </div>
</body>

</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Here are the code which I have removed out extra codes for brevity.

Upvotes: 1

Views: 990

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1074248

YOu seem to be avoiding jQuery in clearContainer. If you want to use it that function, then

function clearContainer() {
    $("#cardContainerPlayer > *").slice(1).remove();
}

That selects all child elements of the container and uses slice to get a set of only the ones after the first one, then removes them.

If you want to use the DOM directly:

function clearContainer() {
    var myNode = document.getElementById("cardContainerPlayer");
    var fc = myNode.firstChild;
    var sib = fc && fc.nextSibling;
    while (myNode.lastChild && myNode.lastChild !== sib) {
        myNode.removeChild(myNode.lastChild);
    }
}

Or you might use firstElementChild, nextElementSibling, and lastElementChild, depending on what you want to do and whether you need to handle text nodes in there. More on those various properties in MDN's DOM documentation.

Upvotes: 2

Jacobdo
Jacobdo

Reputation: 2001

In your clearContainer() method, you can use something like this

function clearContainer() {
  debugger
  var myNode = document.getElementById("cardContainerPlayer");
  var fc = myNode.firstChild;

  while (fc.nextSibling) {
    myNode.removeChild(fc.nextSibling);
  }
}

By removing the next sibling of the child, at the end you will be left just with the firstChild.

Upvotes: 2

Gruntzy
Gruntzy

Reputation: 443

You should use the nextSibling() method to find and delete every sibling of the 1st child : 

function clearContainer() {
    debugger
    var myNode = document.getElementById("cardContainerPlayer");
    var fc = myNode.firstChild;

    while (fc.nextSibling) {
        myNode.removeChild(fc.nextSibling);
    }
}

Upvotes: 1

Related Questions