How do I remove a specific class from the child element-CodePudding

Board is the parent I am trying to make a button that removes both red and yellow piece from the classes

<div id="board">
<div id="0-0" ></div>
<div id="0-1" ></div>
<div id="0-2" ></div>
//etc...
</div>

this is my attempt, I made a button that calls this function when clicked resetButton.addEventListener('click', resetGame)

please tell me what to do to fix it attempt:

function resetGame(){
        board.appendChild.classList.remove('red-piece')
        board.appendChild.classList.remove('yellow-piece')   
}

Edit: Just wanted to mention that this is a portion of the code, I already gave them variable/queryselectors and made the necessary css, also the divs below the board div are created using a for loop in JS, this is my attempt to make a connectfour game without using tutorials for an institute project. also I do not know in particular how to use appendChild. Thanks for all the responses

CodePudding user response：

Your code looks like you may not be fully understanding the effects of what you are writing. What do you think appendChild() is doing here? Where is the variable board being defined? The code you are trying to write may look something more like this, but I suggest you try to really understand each part of every piece of code you copy.

function resetGame(){
  document.querySelectorAll( '#board .tile' ).forEach( element => element.classList.remove( 'red-piece', 'yellow-piece' ) );
}

as for setting up the button, you need an element, and you need to use a query selector (or get by id) to get a reference to that button, so that you can add the event listener.

<button id="reset-button"></button>

document.getElementById( 'reset-button' ).addEventListener( 'click', resetGame );

CodePudding user response：

Do not use .appendChild() that is to add elements to the DOM to which they already are.

Target each .tile

document.querySelectorAll(".tile").forEach(tile => //...

You can use more than one parameter with .add() and .remove()
```
/*...*/ tile.classList.remove("red", "gold");
```

document.querySelector(".reset").onclick = resetBoard;

function resetBoard(event) {
  document.querySelectorAll(".tile").forEach(tile => {
    tile.classList.remove("red", "gold");
  });
}

main {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: max-content;
  border: 2px ridge #ddd;
}

.tile {
  width: 50px;
  height: 50px;
  border: 2px inset #ddd;
}

.red {
  background-color: red;
}

.red:hover {
  background-color: rgba(255, 0, 0, 0.5);
  transition: 0.3s;
}

.gold {
  background-color: gold;
}

.gold:hover {
  background-color: rgba(255, 215, 0, 0.5);
  transition: 0.3s;
}
  
.reset {
  display: block;
  width: 270px;
  font: inherit;
  cursor: pointer;
}

<button >RESET</button>
<main>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</main>

CodePudding user response：

would this work for you?

const resetButton = document.getElementById("reset-button")
resetButton.addEventListener('click', resetGame)

const board = document.getElementById("board")

function resetGame() {
  board.getElementsByClassName("red-piece")[0].classList.remove("red-piece")
  board.getElementsByClassName('yellow-piece')[0].classList.remove('yellow-piece')
}

.red-piece {
  color: red;
}

.yellow-piece {
  color: yellow;
 }

<div id="board">
  <div id="0-0" >tile</div>
  <div id="0-1" >tile red-piece</div>
  <div id="0-2" >tile yellow-piece</div>
  //etc...
</div>

<button id="reset-button">reset</button>