Question 298976 in Html Question posted in
Some basic documentation can be found here.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuiZA</title>
<link rel="stylesheet" href="css/style.css"/>
<script src="jsapp.js"></script>
</head>
<body>
     <div class="container">
        <h1 class="frontlogo">QuiZA Logo </h1>
        <video autoplay loop src="assetsQZA3.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>
  
</body>
</html>

CSS

.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;
}

JS

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

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Try using a loop to remove buttons one by one

    allButtons.forEach(button => button.parentNode.removeChild(button));
logoButton.parentNode.removeChild(logoButton);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search