我正在尝试创建一个按钮，当我点击它时，一个元素被添加到DOM，当我再次点击它时，它被删除。我想在这两种状态之间切换。我目前的代码只添加和元素，但不从DOM中删除它。
这里是主页的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body id="body">
<div class="container">
<button id="button" onclick="myFunc()">Hello world</button>
</div>
</body>
</html>字符串
的css
body{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
button{
width: 300px;
height: 100px;
cursor: pointer;
font-size: 2em;
border: 1px solid black;
border-radius: 20px;
background-color:transparent;
color: black;
}
.para{
background-color:#196997;
color: white;
}
/* button:hover{
background-color:#196997;
color: white;
} */
.new{
width: 200px;
height: 100px;
background-color: red;
}
.news{
display: none;
}型
和JavaScript
function myFunc() {
var button = document.getElementById('button')
const query = button.classList.toggle("para");
if(query) {
const body = document.getElementById('body')
var newdiv = document.createElement('div')
newdiv.classList.add('new')
body.appendChild(newdiv)
} else {
body.removeChild(newdiv)
}
}型
我想，当按钮被点击，变成蓝色，元素被创建，当再次点击按钮变成白色元素被删除。任何提示来处理这一点，并改善代码将不胜感激。谢谢。这里是小提琴，以观察在行动中的代码。The code fiddle
1条答案
按热度按时间kb5ga3dv1#
你可以将创建的元素存储在函数外部的变量中，然后在需要的时候直接调用
Element#remove。字符串
但是，请注意，使用类切换元素的可见性比在DOM中添加和删除元素更简单。