title: How to I remove all the child element except the first element?
body: <p>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. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &gt; *").slice(1).remove();
  
      var myNode = document.getElementById("cardContainerPlayer");
      var fc = myNode.firstChild;
      var sib = fc &amp;&amp; fc.nextSibling;
      while (myNode.lastChild &amp;&amp; myNode.lastChild !== sib) {
          myNode.removeChild(myNode.lastChild);
      }
  }
  
  makeCardPlayer();    
  clearContainer();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;*/
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;body&gt;
    &lt;div id="cardContainerPlayer"&gt;
      &lt;div class="card templatePlayer"&gt;
        &lt;span class="playerCardFace"&gt;&lt;/span&gt;
        &lt;span class="playerCardSuit"&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here are the code which I have removed out extra codes for brevity. </p>