How do I remove a specific class from the child element

Question

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" class="tile"></div>
<div id="0-1" class="tile red-piece"></div>
<div id="0-2" class="tile yellow-piece"></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

Answer 1

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 );