Uncaught Type Error: allButtons.remove() is not a function?

Question

const startButton = document.getElementById("start");
const allButtons = document.querySelectorAll('button-56');
const logoButton = document.getElementsByClassName("Logo");

addGlobalEventListener("click", ".button-56", e => {
  startGame();
})

function addGlobalEventListener(type, selector, callback) {
  document.addEventListener(type, e => {
    if (e.target.matches(selector)) callback(e)
  })
}

function startGame() {
  allButtons.remove();
  logoButton.remove();
}

.container {
  background: white cover;
  height: 100vh;
  width: 100%;
  display: grid;
}

.grid {
  display: grid;
  grid-auto-flow: row;
  margin: auto;
  gap: 1em;
  text-align: center;
  transition: all ease-in-out 0.6s;
}

.ButtonS:hover {
  transform: scale(1.2);
}

.ButtonC:hover {
  transform: scale(1.2);
}

.ButtonQ:hover {
  transform: scale(1.2);
}

.ButtonS {
  background: white;
  padding: 1em;
  border-radius: 30px;
  transition: all 0.2s ease-in-out;
}

.ButtonC {
  background: white;
  padding: 1em;
  border-radius: 30px;
  transition: all 0.2s ease-in-out;
}

.ButtonQ {
  background: white;
  padding: 1em;
  border-radius: 30px;
  transition: all 0.2s ease-in-out;
}

.button-56 {
  align-items: center;
  background-color: rgb(74, 227, 36);
  border: 2px solid #111;
  border-radius: 8px;
  box-sizing: border-box;
  color: #111;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  height: 48px;
  justify-content: center;
  line-height: 24px;
  max-width: 100%;
  padding: 0 25px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-56:after {
  background-color: #111;
  border-radius: 8px;
  content: "";
  display: block;
  height: 48px;
  left: 0;
  width: 100%;
  position: absolute;
  top: -2px;
  transform: translate(8px, 8px);
  transition: transform .2s ease-out;
  z-index: -1;
}

.button-56:hover:after {
  transform: translate(0, 0);
}

.button-56:active {
  background-color: #ffdeda;
  outline: 0;
}

.button-56:hover {
  outline: 0;
}

@media (min-width: 768px) {
  .button-56 {
    padding: 0 40px;
  }
}

.splash-header {
  color: white;
  transition: all ease-in-out 0.6s;
}

.splash-header:hover {
  transform: scale(1.5);
}

.frontlogo {
  height: 90%;
  color: white;
  display: flex;
  justify-content: center;
  align-content: center;
}

.Logo {
  display: flex;
  border-radius: 50%;
  max-height: 300px;
  justify-content: center;
  align-content: center;
  margin: auto;
  transition: all 2s ease;
}

<div class="container">
  <h1 class="frontlogo">QuiZA Logo </h1>
  <video autoplay loop src="assets\QZA3.mp4" class="Logo"></video>
  <div class="grid">
    <button id="start" class="button-56" role="button">Start</button>
    <button class="button-56" role="button">Quiz List</button>
    <button class="button-56" role="button">Contact</button>
  </div>
  <!--Loading screen will start after this-->
  <div class="splash">
    <h1 class="splash-header">Press Here...</h1>
  </div>
</div>

I am continuing a quiz application project and I am running into the above error code on line 16 of my JS. It does not display this error in the compiler and it runs, when I inspect my document I get the error listed in the title.

I am attempting to utilize, allButtons.remove(); and `logoButton.remove(); to on the event that a user clicks the start button all of the buttons and the logo would be removed from the document creating a fresh canvas for me to display a quiz question and a user input of some sort like multiple choice or scanner.

(https://jsfiddle.net/vqc1onap/2/#&togetherjs=0OdOatkR6z) I have tried using different selectors and tried a different variable name I haven't found a solution yet.

Answer 1

Remove is on an element, you have a collection.

const allButtons = document.querySelectorAll('.button-56');
allButtons.forEach( btn => btn.remove() );

<button id="start" class="button-56" role="button">Start</button>
<button class="button-56" role="button">Quiz List</button>
<button class="button-56" role="button">Contact</button>

Answer 2

Try using a loop to remove buttons one by one

allButtons.forEach(button => button.parentNode.removeChild(button));
logoButton.parentNode.removeChild(logoButton);

Answer 3

Thank you for the help I ended up using a loop to iterate through each element in the grid div I had the buttons in, deleting each.

[...buttonGrid].forEach(button => button.remove());

Although, the new error occurring is the logoButton will not remove I will end up making another post about it though.