Remove class ID from parent element

Question

Full code https://codepen.io/3noki/pen/xjyErQ?editors=0010

For this card game, if two cards don't match this function will execute;

function unFlip() {
  openedCardsList[1].parent().removeClass('open');
  openedCardsList[1].parents.toggle('open');
  openedCardsList = [];
  console.log('unflipped')
}

This is supposed to un-flip the cards, but it gives me errors whatever I am trying to say here, whether its toggle is not a function or toggle is undefined, etc.

How do I remove the class from the parent element? Is it because I pushed the card to this array earlier, and it can't tell what it's parent is because it's not an element any more but object in an array?

openedCardsList.push(this.querySelector('i'));

Answer 1

Check this 3rd line in the snippet below..

/*declaring variables*/

//Create a list that holds all of your cards
let cardsList = [
  "fa-diamond",
  "fa-paper-plane-o",
  "fa-anchor",
  "fa-bolt",
  "fa-cube",
  "fa-leaf",
  "fa-bicycle",
  "fa-bomb",
  "fa-diamond",
  "fa-paper-plane-o",
  "fa-anchor",
  "fa-bolt",
  "fa-cube",
  "fa-leaf",
  "fa-bicycle",
  "fa-bomb"
];

restart = $(".restart");
deck = $(".deck");
score = $(".score-panel");
container = $(".container");
star = $(".fa-star");
moves = $(".moves");
timer = $(".timer");
cards = $(".card");
card = document.getElementsByClassName('card');

let openedCardsList = [];
let matchedCards = [];
let start = false;
let started = false;
let seconds = 0;
let clicks = 0;
let solvedCount = 0;
let time = setInterval(incrementSeconds, 1000);

/*declaring functions*/

//Shuffle function from http://stackoverflow.com/a/2450976
function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue,
    randomIndex;

  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

function init() {
  let shuffledCards = shuffle(cardsList);
  openedCardsList = [];
  createCardHTML();
  incrementSeconds();
}


function newGame() {
  //cardFlip();
  symbol = cards.children("i");
  symbol.removeClass(
    "fa-diamond fa-paper-plane-o fa-anchor fa-bolt fa-cube fa-leaf fa-bicycle fa-bomb fa-bug"
  );
  init();
  clicks = 0;
  moves.text(clicks);
  cards.removeClass('open');
  openedCardsList = [];
  createCardHTML();
  incrementSeconds();
}

function createCardHTML() {
  symbol = cards.children("i");
  symbol.each(function(index, item) {
    $(item).addClass(cardsList[index]);
  });
  return symbol;
}

$(".card").on("click", function cardFlip() {
  if (!this.classList.contains('open') && openedCardsList.length < 2) {
    $(this).toggleClass('open');
    e.preventDefault();
    //this.classList.toggle('show');
    openedCardsList.push(this.querySelector('i'));
    console.log(openedCardsList);
    console.log("flipped")
  } else {
    checkForMatch(event)
  }
});

function checkForMatch(event) {
  if (openedCardsList[0] === openedCardsList[1]) {
    openedCardsList[0].classList.remove('open');
    openedCardsList[0].classList.add('match');
    openedCardsList[1].classList.remove('open');
    openedCardsList[1].classList.add('match');
    console.log('matched');
    openedCardsList = [];
  } else {
    unFlip(event)
  }
}

function unFlip() {
  openedCardsList[0].classList.toggle(['open']);
  openedCardsList[1].parents.toggle('open');
  openedCardsList = [];
  console.log('unflipped')
}



//counts clicks and edits text
$(".card").on("click", clickCounter);

function clickCounter() {
  clicks++;
  moves.text(clicks);
}

//counts seconds and displays
function incrementSeconds() {
  if (matchedCards != 8) {
    seconds += 1;
    timer.text(seconds);
    return;
  }
  //supposed to stop timer if game is over
  else {
    timer.text(seconds) = Number(countMatches).toLocaleString('en');
    alert(Number);
  }
}

//starts game when page is ready
$(document).ready(init);
//restarts on click
$(".restart").click(newGame);

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #ffffff url('../img/geometry2.png');
  /* Background pattern from Subtle Patterns */
  font-family: 'Coda', cursive;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}


/*
 * Styles for the deck of cards
 */

.deck {
  width: 660px;
  min-height: 680px;
  //background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
  padding: 32px;
  border-radius: 10px;
  box-shadow: 12px 15px 20px 8px rgba(46, 61, 73, 0.5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 3em;
}

.deck .card {
  height: 125px;
  width: 125px;
  background: #070707;
  font-size: 0;
  color: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.deck .card.open {
  /* transform: rotateY(0); */
  background: #81a37a;
  cursor: default;
  transform: rotateY(180deg);
  transition: 1s ease;
}

.deck .card.open {
  font-size: 33px;
  transform: rotateY(180deg);
  transition: 1s ease;
}

.deck .card.hide {
  transform: rotateY(180deg);
  transition: 1s ease;
}

.deck .card.match {
  cursor: default;
  background: #456848;
  font-size: 33px;
}


/*
 * Styles for the Score Panel
 */

.score-panel {
  text-align: left;
  width: 345px;
  margin-bottom: 10px;
}

.score-panel .stars {
  margin: 0;
  padding: 0;
  display: inline-block;
  margin: 0 5px 0 0;
}

.score-panel .stars li {
  list-style: none;
  display: inline-block;
}

.score-panel .restart {
  float: right;
  cursor: pointer;
}


/* alert styles */

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: left;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Matching Game</title>
  <meta name="description" content="">
  <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/app.css">
</head>

<body>

  <div class="container">
    <header>
      <h1>Matching Game</h1>
    </header>
    <br/>
    <section class="score-panel">
      <ul class="stars">
        <li><i id="1st-star" class="fa fa-star"></i></li>
        <li><i id="2nd-star" class="fa fa-star"></i></li>
        <li><i id="3rd-star" class="fa fa-star"></i></li>
      </ul>
      <span class="moves">0</span> :clicks | time:
      <span class="timer">0</span> :seconds
      <div class="restart"><i class="fa fa-repeat"></i></div>
    </section>

    <ul class="deck">
      <li class="card">
        <i class="fa "></i>
      </li>
      <li class="card">
        <i class="fa "></i>
      </li>
      <li class="card">
        <i class="fa "></i>
      </li>
      <li class="card">
        <i class="fa "></i>
      </li>
      <li class="card">
        <i class="fa "></i>
      </li>
      <li class="card">
        <i class="fa "></i>
      </li>
      <li class="card">
        <i class="fa "></i>
      </li>
      <li class="card">
        <i class="fa "></i>
      </li>
      <li class="card">
        <i class="fa "></i>
      </li>
      <li class="card">
        <i class="fa "></i>
      </li>
      <li class="card">
        <i class="fa "></i>
      </li>
      <li class="card">
        <i class="fa "></i>
      </li>
      <li class="card">
        <i class="fa "></i>
      </li>
      <li class="card">
        <i class="fa "></i>
      </li>
      <li class="card">
        <i class="fa "></i>
      </li>
      <li class="card">
        <i class="fa "></i>
      </li>
    </ul>

  </div>

  <script src="js/app.js"></script>

</body>

</html>

and change it to: $(this).toggleClass('open'); e.preventDefault();

$(".card").on("click", function cardFlip() {
  if (!this.classList.contains('open') && openedCardsList.length < 2) {
    $(this).toggleClass('open');
    e.preventDefault();
    //this.classList.toggle('show');
    openedCardsList.push(this.querySelector('i'));
    console.log(openedCardsList);
    console.log("flipped")
  } else {
    checkForMatch(event)
  }
});

Answer 2

openedCardsList[1] is a native DOM object, not a jQuery object. If you want to use the jQuery .parent() method, you first have to pass the object to the $ function, to make it a jQuery object:

$(openedCardsList[1]).parent().removeClass('open');