removed Class and want to add it back

Question

I coded a simple javascript "clearning Shopping List" code.

I was able to remove the shopping list and add two messages: One says that the shopping list has been cleared and one pops up a button that asks if it was a mistake and you want to undo your change.

Now my problem is that when you press the "Undo" button the class doesn't get added back.

 // 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>

I would assume this part is wrong:

//Undo Removal
clearedUndo.addEventListener("click", () => {
   clearedUndo.createClass(".shoppingCart");
});

Answer 1

ISSUE

Don't use the elem.remove .Because if you undo the action no elements are present .For alternatively you can use elem.classList.toggle

 // 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.classList.toggle('hide') clearedBox.classList.toggle('show') //toggleButton.remove("button.showList"); }); //Undo Removal clearedUndo.addEventListener("click", () => { shoppingList.classList.toggle('hide') clearedBox.classList.toggle('show') });

 html, body { margin: 0; padding: 0; margin-left: 30px; } .clearedBox { display: none; } .hide{ display: none; } .show{ display: block; } .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>

Answer 2

Once you remove it, it's gone, and if you want to put it back with JavaScript then all that markup really needs to be re-inserted, so I'd consider just hiding and showing the elements as needed, by changing the JS to this:

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

removed Class and want to add it back

Question

2 answers

solution1
0 2020-01-22 08:29:17

solution2
0 ACCPTED 2020-01-22 08:30:41

removed Class and want to add it back

Question

2 answers

solution1 0 2020-01-22 08:29:17

solution2 0 ACCPTED 2020-01-22 08:30:41

solution1
0 2020-01-22 08:29:17

solution2
0 ACCPTED 2020-01-22 08:30:41