所以我正在继续我的测验应用程序,我之前的问题让我深入了解集合如何不能使用
.remove()
。我想我的第二个问题是,我最近在让徽标做同样的事情时遇到了几个问题。如果循环不起作用且默认调用不起作用,如何从 DOM 中删除徽标图像。
我尝试在容器上使用
.removeChild
,我还尝试通过执行logoLoop.parentNode.removeChild(logoLoop);
来间接做到这一点,这两件事都导致.remove()
和.removeChild()
都不是函数错误
在尝试访问删除功能时,我没有意识到我更改了徽标的 html,以便视频不再是 .mp4,现在是带有 GIF 的
<img>
标签。没有什么区别。
有没有办法从 DOM 中完全删除图像?
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;
}
.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;
}
<!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>
logoLoop
是一个包含 NodeList
的数组。没有理由将其包装在数组中。您应该像您创建的其他集合一样定义和使用它。
const logoLoop = document.querySelectorAll(".Logo")];
//...
logoLoop.forEach(logo => logo.remove());
顺便说一句,如果您使用
querySelectorAll()
创建所有集合,则无需使用 [...variable]
来循环它们。 querySelectorAll()
返回的集合实现了.forEach()
。