我编写了一个简单的 javascript“清理购物 list ”代码。
我能够删除购物 list 并添加两条消息: 一种表示购物 list 已被清除，另一种会弹出一个按钮，询问是否有误，并且您想撤消更改。
现在我的问题是，当您按下“撤消”按钮时，类不会被添加回来。
// javascript
var shoppingList = document.querySelector(".shoppingCart");
var toggleButton = document.querySelector("button.showList");
var clearedBox = document.querySelector(".clearedBox");
var clearedUndo = document.querySelector("button.clearedUndo");
//Toggle Shopping Cart
toggleButton.addEventListener("click", () => {
shoppingList.remove(".shoppingCart");
clearedBox.style.display = "block";
toggleButton.remove("button.showList");
});
//Undo Removal
clearedUndo.addEventListener("click", () => {
clearedUndo.createClass(".shoppingCart");
});html, body {
margin: 0;
padding: 0;
margin-left:30px;
}
.clearedBox {
display:none;
}
.clearedMessage {
background:#D66A68;
color: white;
padding:10px;
width:260px;
text-align:center;
border-radius:10px;
}
.clearedUndo {
background:#1C77C3;
color: white;
padding:5px;
width:225px;
border-radius:5px;
text-align:center;
font-size:12px;
}<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>index.html</h1>
<button class="showList">Show</button>
<div class="shoppingCart">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Juice</li>
<li>Pasta</li>
<li>Water</li>
<li>Donuts</li>
</ul>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
</div>
<div class="clearedBox">
<p class="clearedMessage">Your Shopping cart is now cleared!</p>
<button class="clearedUndo">Accidental? Undo your change!</button>
</div>
<script src="index.js"></script>
</body>
</html>我认为这部分是错误的:
//Undo Removal
clearedUndo.addEventListener("click", () => {
clearedUndo.createClass(".shoppingCart");
});
最佳答案
一旦你删除它，它就消失了，如果你想用 JavaScript 把它放回去，那么所有的标记都需要重新插入，所以我会考虑根据需要隐藏和显示元素，通过改变JS 对此:
var shoppingList = document.querySelector(".shoppingCart");
var toggleButton = document.querySelector("button.showList");
var clearedBox = document.querySelector(".clearedBox");
var clearedUndo = document.querySelector("button.clearedUndo");
//Toggle Shopping Cart
toggleButton.addEventListener("click", () => {
shoppingList.style.display = "none";
clearedBox.style.display = "block";
toggleButton.style.display = "none";
});
//Undo Removal
clearedUndo.addEventListener("click", () => {
shoppingList.style.display = "block";
clearedBox.style.display = "none";
toggleButton.style.display = "block";
});
关于javascript - 删除类并想将其添加回来，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59855343/