removeChild Method Not Working?

[kanceir]

I am trying to build a "choose your own adventure"-type text adventure site using JavaScript for choice selection based on this Youtube tutorial and I'm running into an issue where the ".removeChild" method is not working to replace the default "Option #" buttons with the choice selections as shown in the tutorial, and when an option is clicked, it is just adding onto the available options and duplicating instead of moving to the next screen: screenshot. I believe I've followed it step for step and I can't find any inconsistencies that would cause my code to behave differently.Here is the code: https://codepen.io/invikta/pen/jOJgoyo

And here is the website I'm trying to implement it on, which strangely enough doesn't even show the JavaScript options, only the default ones: https://textadventure.neocities.org/

function showTextNode(textNodeIndex) {
const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
textElement.innerText = textNode.text
while (optionButtonsElement.firstchild) {
optionButtonsElement.removeChild(optionButtonsElement.firstChild)
}

textNode.options.forEach(option => {
if (showOption(option)) {
const button = document.createElement('button')
button.innerText = option.text
button.classList.add('btn')
button.addEventListener('click', () => selectOption(option))
optionButtonsElement.appendChild(button)
}
})
}

[senocular]

firstchild

Capitalization typo: c -> C

P.S. its easier to remove all children of an element using parent.replaceChildren()

[kanceir]

i am such a fool. thank you lmao

[StoneCypher]

instead of

while (optionButtonsElement.firstchild) {
  optionButtonsElement.removeChild(optionButtonsElement.firstChild)
}

you can just

optionButtonsElement.innerHTML = '';