title: Adding a reset/New Game button to code
body: <p>Edit: I have partly solved this using help from Sean. I have managed to clear the DIV tags that are holding the game cards and remove them from the page.</p>
  
  <p>I now have a problem restarting the game again. please see below for the revised code:</p>
  
  <p>Revised Javascript:</p>
  
  <pre><code>        var matchingGame = {};
  
          // all cards used in game
          // additional cards can be added ... see CSS
  
  matchingGame.deck = 
      [
          'card01', 'card01',
          'card02', 'card02',
          'card03', 'card03',
          'card04', 'card04',
          'card05', 'card05',
          'card06', 'card06',
      ];
  
  $(function pageLoad()
      {
          gameStart();
      });
  
  function gameStart()
      {
          // shuffling
          matchingGame.deck.sort(shuffle);
  
          // This loop generates 12 cards. You can increase or decrease the number of cards created by changing the number of loops.
          for(var i=0;i&lt;11;i++)
              {
                  $(".card:first-child").clone().appendTo("#cards");
              }
  
          // initialize each card
          $("#cards").children().each(function(index)
              {
                  // align the cards to each other using card width and card height
  
                  $(this).css({
                      "left" : ($(this).width()  + 20) * (index % 4),
                      "top"  : ($(this).height() + 20) * Math.floor(index / 4)
                  });
  
                  // get pattern from shuffled deck
                  var pattern = matchingGame.deck.pop();
  
                  //apply pattern to card back
                  $(this).find(".back").addClass(pattern);
                  $(this).attr("data-pattern",pattern);
  
                  // select card
                  $(this).click(selectCard);
              });
      }
  
  function selectCard() 
      {
          // do nothing if two cards flipped
          if ($(".card-flipped").size() &gt; 1)
              {
                  return;
              }
  
          //animate cards
          $(this).addClass("card-flipped");
          if ($(".card-flipped").size() == 2)
              {
                  setTimeout(checkPattern,700);
              }
      }
  
  //random number between -0.5 to 0.5
  function shuffle()
      {
  
          return 0.5 - Math.random();
      }
  
  // matched cards
  function checkPattern()
      {
          if (matchingPattern())
              {
                  $(".card-flipped").removeClass("card-flipped").addClass("card-removed");
  
                  // remove card after match
                  $(".card-removed").bind("webkitTransitionEnd", removeMatchedCards); 
              }
          else
              {
                  $(".card-flipped").removeClass("card-flipped");
              }
      }
  
  // check pattern
  
  function matchingPattern()
      {
          var cards = $(".card-flipped");
          var pattern = $(cards[0]).data("pattern");
          var anotherPattern = $(cards[1]).data("pattern");
          return (pattern == anotherPattern);
      }
  
  function removeMatchedCards()
      {
          $(".card-removed").remove();
      }
  
  function clearBoard(game)
      {
          //Remove all remaining cards from here (Clean up the DIV's if need be)
          document.getElementById(game).innerHTML = "";
          //document.getElementById(cards).innerHTML = "";
          //document.getElementById(card).innerHTML = "";
  
  
  
      }
  
  function newGame()
      {
          gameStart();
      }
  </code></pre>
  
  <p>It is with the "function newGame()" area that im having trouble with. The clear Board function works, however the newGame() function wont work after the clear game board button is clicked. Is there something im missing here to make sure this clears the divs and starts the game afresh without doing a page refresh?</p>
  
  <p>I know this would be easier with a page refresh but that, imho, is cheating and doesn't leave the floor open for future development of the code. Same can sort of be said for the iFrame approach as well.</p>
  
  <p>Revised HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Matching Game&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/matchgame.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="fb-root"&gt;Facebook button text&lt;/div&gt;
  
      &lt;script&gt;
          (function(d, s, id) 
              {
                  var js, fjs = d.getElementsByTagName(s)[0];
                  if (d.getElementById(id)) return;
                  js = d.createElement(s); js.id = id;
                  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.3";
                  fjs.parentNode.insertBefore(js, fjs);
              }
  
          (document, 'script', 'facebook-jssdk'));
      &lt;/script&gt;
  
      &lt;header id="headerText"&gt;
          &lt;h1&gt;Card Matching Game&lt;/h1&gt;
      &lt;/header&gt;
  
      &lt;section id="game"&gt;
          &lt;div id="cards"&gt;
              &lt;div class="card"&gt;
                  &lt;div class="face front"&gt;&lt;/div&gt;
                  &lt;div class="face back"&gt;&lt;/div&gt;
              &lt;/div&gt; &lt;!-- .card --&gt;
          &lt;/div&gt; &lt;!-- #cards --&gt;
      &lt;/section&gt; &lt;!-- #game --&gt;
  
      &lt;footer id="footerText"&gt;
          &lt;div id="deadSpace"&gt;
               &lt;button onClick="clearBoard('game')"&gt;Clear Game Board&lt;/button&gt;
  
               &lt;button onclick="newGame()"&gt;New Game&lt;/button&gt;
  
              &lt;!-- &lt;iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.evocca.com&amp;amp;layout=button_count&amp;amp;show_faces=true&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;" style="overflow:hidden;width:100%;height:80px;" scrolling="no" frameborder="0" allowTransparency="true"&gt;&lt;/iframe&gt; --&gt;
  
              &lt;p&gt;Bare Bones Card Matching Game&lt;/p&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  
  &lt;script src="js/jquery-1.6.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/matchCardGame.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Again im just after a fresh pair of eyes on this to see what im missing here. Also ill point out again im not after a straight up answer just a nudge in the right direction :) Thanks.</p>