So I'm continuing my Quiz application and my previous question gave me insight on how collections cannot use .remove(). I suppose my second question is, I've recently run into several problems getting the logo to do the same. How can I remove the logo image from the DOM if a loop didn't work and the default call didn't work.
I've tried to use .removeChild on the container, I've also tried to indirectly do it by doing logoLoop.parentNode.removeChild(logoLoop);both of these things resulted in the not a function error for both the .remove() & .removeChild()
In an attempt to access a remove function I was unaware about I changed the html for the logo so that the video was no longer an .mp4 and was now an <img> tag with a GIF. It didn't make a difference.
Is there a way to remove an image from the DOM completely?
const startButton = document.getElementById("start");
const allButtons = document.querySelectorAll('.button-56');
const buttonGrid = document.getElementsByClassName("grid");
const logoLoop = [document.getElementsByClassName("Logo")];
var container = document.getElementsByClassName("Container");
addGlobalEventListener("click", ".button-56", e => {
startGame();
})
//Global Listener
function addGlobalEventListener(type, selector, callback) {
document.addEventListener(type, e => {
if (e.target.matches(selector)) callback(e)
})
}
//Will use start game to remove button collection and logo this is where the error occurs. Buttons go away but not logo.
function startGame() {
[...buttonGrid].forEach(button => button.remove());
[...container].forEach(img => img.remove());
}.container {
background: white cover;
height: 100vh;
width: 100%;
display: grid;
}
.Logo {
display: flex;
border-radius: 50%;
max-height: 300px;
justify-content: center;
align-content: center;
margin: auto;
transition: all 2s ease;
}<!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="js/app.js"></script>
</head>
<body>
<div class="container">
<h1 class="frontlogo">QuiZA Logo </h1>
<img src="assets\r1Logo.gif" alt="" class="Logo">
<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>
logoLoopis an array containing aNodeList. Arrays don't have a.parentNodeproperty. You would need to loop overlogoLoop[0]to access the DOM elements.There's no reason to wrap it in an array. You should define and use it just like the other collections you create.
BTW, if you use
querySelectorAll()to create all your collections, you don't need to use[...variable]to loop over them. The collection returned byquerySelectorAll()implements.forEach().