Getting an error when I try to use ".remove()"-CodePudding

I'm currently working on a BlackJack game in HTML/CSS/JS as practice. I am trying to remove the card images I added, after "Play Again" is clicked, but I get an error.

I have tried moving the code to the start of the "startGame()" function, and that removed the images, but it also resulted in no images being printed (or them getting removed instantly i guess).

Can anyone tell me what i'm doing wrong?

let cardValues = ["A", 2, 3, 4, 5, 6, 7, 8, 9, "J", "Q", "K"];
let cardSuits = ["hearts", "spades", "clubs", "diamonds"];
let deck = new Array();
let players = new Array();
let dealerCard;
let hiddenCard;
let dealerTotal = 0;
let playerCard1;
let playerCard2;
let playerTotal = 0;

window.onload = function() {
    startGame()
}

function startGame() {  
    document.getElementById("game-over").style.visibility = "hidden";
    makeDeck();
    shuffleDeck(deck);
    runGame();
}
function makeDeck() {
    deck = new Array();
    for (let i = 0; i < cardValues.length; i  )
    {
        for (let j = 0; j < cardSuits.length; j  )
        {
            let weight = parseInt(cardValues[i]);
            if (cardValues[i] == "J" || cardValues[i] == "Q" || cardValues[i] == "K")
            {
                weight = 10;
            } else if (cardValues[i] == "A")
            {
                weight = 11;
            }
            let card = {cardValue: cardValues[i], cardSuit: cardSuits[j], cardWeight: weight}
            deck.push(card)
        }
    }
}

function shuffleDeck(deck) {
    for (let i = deck.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i   1));
        [deck[i], deck[j]] = [deck[j], deck[i]];
    }
}

function runGame() {
    hiddenCard = deck.pop();
    dealerTotal  = hiddenCard.cardWeight;
    console.log(hiddenCard)

    while (dealerTotal < 17) {
        let cardImg = document.createElement("img");
        let card = deck.pop();
        cardImg.src = "/assets/img/"   card.cardValue   "_"   card.cardSuit   ".png";
        cardImg.classList.add("card-image")
        document.getElementById("dealer-cards").append(cardImg);
        dealerTotal  = card.cardWeight;
        console.log(dealerTotal);  
    }

    for (let i = 0; i < 2; i  ) {
        let cardImg = document.createElement("img");
        let card = deck.pop();
        cardImg.src = "/assets/img/"   card.cardValue   "_"   card.cardSuit   ".png";
        document.getElementById("player-cards").append(cardImg);
        playerTotal  = card.cardWeight;
    }  
}

function hit() {
    let card = deck.pop();
    let cardImg = document.createElement("img");
    cardImg.src = "/assets/img/"   card.cardValue   "_"   card.cardSuit   ".png";
    document.getElementById("player-cards").append(cardImg);
    playerTotal  = card.cardWeight;
    checkGameOver()
}

function playAgain() {
    playerTotal = 0;
    dealerTotal = 0; 
    let cardImg = $(document.getElementsByClassName("card-image"))
    $(cardImg).remove();
    startGame();
}

function checkGameOver() {
    if (playerTotal > 21) {
        console.log("Game Over");
        document.getElementById("game-over").style.visibility = "visible";
        return true;
    } else if (playerTotal <= 21) {
        return false;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: white;
}

body {
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif, 'Times New Roman', Times, serif;
    font-size: 2vw;
    margin: auto;
    text-align: center;
    height: 100vh;
    width: 100vw;
    background: #006611;

}

h2 {
    padding: 20px;
}


.board-container {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.dealer, .player {
    background: #0d7e20;
    height: 25%;
    width: auto;
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 5px
}

.dealer img, .player img {
    margin: 50px;
    transform: scale(1.5);
    height: 190px;
    width: 140px;
}

.buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.buttons button {
    font-size: 2rem;
    font-weight: bold;
    width: 150px;
    height: 70px;
    margin: 50px;
    background-color: #b30000;
    color: white;
    border-color: white;
    border-radius: 50px;
    cursor: pointer;
}

.buttons button:hover {
    box-shadow: 0px 7px 39px -11px rgba(0,0,0,0.78);
    background-color: #e40000;
}

#game-over {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background-color:  #00000070;
    height: 100vh;
    width: 100vw;
}

.game-over-container {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(0, 112, 37);
    height: 8vw;
    width: 18vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 50px;
    border: 2px solid white;
}

#play-again {
    background-color: #b30000;
    color: white;
    border-color: white;
    border-radius: 50px;
    font-size: 1.5rem;
    cursor: pointer;
    margin: 10px;
    padding: 15px 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blackjack</title>
    <link rel="stylesheet" href="styles.css">
    <script src="scripts.js"></script>
</head>
<body>
    <div >
        <h2>Dealer: <span id="dealer-total"></h2>
        <div  id="dealer-cards">
            <img id="hidden-card"src="/assets/img/cardBack_blue.png" alt="">
        </div>

        <h2>You: <span id="player-total"></h2>
        <div  id="player-cards">
        </div>
        <div >
            <button onclick=hit() id="hitBtn">Hit</button>
            <button id="stayBtn">Stay</button>
        </div>       
    </div>
    <div id="game-over">
        <div >
            <span>Game Over</span>
            <button id="play-again" onclick=playAgain()>Play Again</button>
        </div>
    </div>
</body>
</html>

CodePudding user response：

Without jQuery, you can rewrite

let cardImg = $(document.getElementsByClassName("card-image"))
$(cardImg).remove();

let cards = document.getElementsByClassName("card-image");
for (let card of cards) card.remove();

CodePudding user response：

If you're going to use $, you need to load the jQuery library. But there's no need for it here, since vanilla DOM JS also has a .remove() method.

Since document.getElementsByClassName() returns a NodeList, you have to loop over it to remove all of them.

You need to add the card-image class whenever you create a new card.

let cardValues = ["A", 2, 3, 4, 5, 6, 7, 8, 9, "J", "Q", "K"];
let cardSuits = ["hearts", "spades", "clubs", "diamonds"];
let deck = new Array();
let players = new Array();
let dealerCard;
let hiddenCard;
let dealerTotal = 0;
let playerCard1;
let playerCard2;
let playerTotal = 0;

window.onload = function() {
    startGame()
}

function startGame() {  
    document.getElementById("game-over").style.visibility = "hidden";
    makeDeck();
    shuffleDeck(deck);
    runGame();
}
function makeDeck() {
    deck = new Array();
    for (let i = 0; i < cardValues.length; i  )
    {
        for (let j = 0; j < cardSuits.length; j  )
        {
            let weight = parseInt(cardValues[i]);
            if (cardValues[i] == "J" || cardValues[i] == "Q" || cardValues[i] == "K")
            {
                weight = 10;
            } else if (cardValues[i] == "A")
            {
                weight = 11;
            }
            let card = {cardValue: cardValues[i], cardSuit: cardSuits[j], cardWeight: weight}
            deck.push(card)
        }
    }
}

function shuffleDeck(deck) {
    for (let i = deck.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i   1));
        [deck[i], deck[j]] = [deck[j], deck[i]];
    }
}

function runGame() {
    hiddenCard = deck.pop();
    dealerTotal  = hiddenCard.cardWeight;
    console.log(hiddenCard)

    while (dealerTotal < 17) {
        let cardImg = document.createElement("img");
        let card = deck.pop();
        cardImg.src = "/assets/img/"   card.cardValue   "_"   card.cardSuit   ".png";
        cardImg.classList.add("card-image")
        document.getElementById("dealer-cards").append(cardImg);
        dealerTotal  = card.cardWeight;
        console.log(dealerTotal);  
    }

    for (let i = 0; i < 2; i  ) {
        let cardImg = document.createElement("img");
        let card = deck.pop();
        cardImg.src = "/assets/img/"   card.cardValue   "_"   card.cardSuit   ".png";
        cardImg.classList.add("card-image")
        document.getElementById("player-cards").append(cardImg);
        playerTotal  = card.cardWeight;
    }  
}

function hit() {
    let card = deck.pop();
    let cardImg = document.createElement("img");
    cardImg.src = "/assets/img/"   card.cardValue   "_"   card.cardSuit   ".png";
    cardImg.classList.add("card-image")
    document.getElementById("player-cards").append(cardImg);
    playerTotal  = card.cardWeight;
    checkGameOver()
}

function playAgain() {
    playerTotal = 0;
    dealerTotal = 0; 
    let cardImg = document.querySelectorAll(".card-image");
    cardImg.forEach(card => card.remove());
    startGame();
}

function checkGameOver() {
    if (playerTotal > 21) {
        console.log("Game Over");
        document.getElementById("game-over").style.visibility = "visible";
        return true;
    } else if (playerTotal <= 21) {
        return false;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: white;
}

body {
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif, 'Times New Roman', Times, serif;
    font-size: 2vw;
    margin: auto;
    text-align: center;
    height: 100vh;
    width: 100vw;
    background: #006611;

}

h2 {
    padding: 20px;
}


.board-container {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.dealer, .player {
    background: #0d7e20;
    height: 25%;
    width: auto;
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 5px
}

.dealer img, .player img {
    margin: 50px;
    transform: scale(1.5);
    height: 190px;
    width: 140px;
}

.buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.buttons button {
    font-size: 2rem;
    font-weight: bold;
    width: 150px;
    height: 70px;
    margin: 50px;
    background-color: #b30000;
    color: white;
    border-color: white;
    border-radius: 50px;
    cursor: pointer;
}

.buttons button:hover {
    box-shadow: 0px 7px 39px -11px rgba(0,0,0,0.78);
    background-color: #e40000;
}

#game-over {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background-color:  #00000070;
    height: 100vh;
    width: 100vw;
}

.game-over-container {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(0, 112, 37);
    height: 8vw;
    width: 18vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 50px;
    border: 2px solid white;
}

#play-again {
    background-color: #b30000;
    color: white;
    border-color: white;
    border-radius: 50px;
    font-size: 1.5rem;
    cursor: pointer;
    margin: 10px;
    padding: 15px 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blackjack</title>
    <link rel="stylesheet" href="styles.css">
    <script src="scripts.js"></script>
</head>
<body>
    <div >
        <h2>Dealer: <span id="dealer-total"></h2>
        <div  id="dealer-cards">
            <img id="hidden-card"src="/assets/img/cardBack_blue.png" alt="">
        </div>

        <h2>You: <span id="player-total"></h2>
        <div  id="player-cards">
        </div>
        <div >
            <button onclick=hit() id="hitBtn">Hit</button>
            <button id="stayBtn">Stay</button>
        </div>       
    </div>
    <div id="game-over">
        <div >
            <span>Game Over</span>
            <button id="play-again" onclick=playAgain()>Play Again</button>
        </div>
    </div>
</body>
</html>