How to add back the elements after removing every element by document.getElementById in Javascript

Question

I had this case where I remove the elements by using document.getElementById to target whom to be used, then remove it by doing element.remove(). I only wanted to add it back for me to use the classList.toggle again

ps 'test' and '.settings-menu' are on the same div, I only used id and class and only wanted to know how to return the elements back after removing, I also specifically wanted to use el.remove() rather than classList.remove() for a specific purpose.

 var el = document.getElementById('test'); let settingsmenu = document.querySelector (".settings-menu"); function removeClass(){ el.remove(); } function addclass(){ settingsmenu.classList.toggle() }

Answer 1

This example offers 4 different solutions:

• When the page load s, the load event is triggered, adding the child <div> element to the page.
• Clicking the "Toggle Element" button will show/hide the child <div> element.
• Clicking the "Toggle Class" button will add/remove the customStyle class style to the child <div> element.
• Clicking the "Remove Element" button removes the child <div> element from the page.
• Clicking the "Add Element" button will add the child <div> element to the page.

 var toggleElementButton = document.getElementById('toggleElement'); var toggleClassButton = document.getElementById('toggleClass'); var removeClassButton = document.getElementById('removeClass'); var parentContainer = document.getElementById('parent'); /* HTML element to add dynamically. */ var element = `<div id="test" class="customStyle" style="display: block;">TEST</div>`; /* The dynamic element is added to the page when the page loads. */ window.addEventListener('load', (event) => { parentContainer.innerHTML += element; }); /* Clicking the "Toggle Element" button will show/hide the item. */ toggleElementButton.addEventListener("click", function(){ var currentElement = document.getElementById('test'); if(document.getElementById('test').style.display == "none") currentElement.style.display = "block"; else currentElement.style.display = "none"; }); /* Clicking the "Toggle Class" button adds/removes the class style. */ toggleClassButton.addEventListener("click", function(){ document.getElementById('test').classList.toggle("customStyle"); }); /* Clicking the "Remove Element" button removes the item. */ /* When the "Add Element" button is clicked, the item is added. */ removeClassButton.addEventListener("click", function(){ if(removeClassButton.innerHTML == "Remove Element") { document.getElementById('test').remove(); removeClassButton.innerHTML = "Add Element"; toggleElementButton.disabled = true; toggleClassButton.disabled = true; } else if(removeClassButton.innerHTML == "Add Element") { parentContainer.innerHTML += element; removeClassButton.innerHTML = "Remove Element"; toggleElementButton.disabled = false; toggleClassButton.disabled = false; } });

 .container{ margin-top: 10px; }.customStyle{ border: 1px solid red; }

 <button id="toggleElement">Toggle Element</button> <button id="toggleClass">Toggle Class</button> <button id="removeClass">Remove Element</button> <div id="parent" class="settings-menu container"> <.-- The item is dynamically added and removed here. --> </div>

Answer 2

An easier way is to use hidden :

 var el = document.getElementById('test'); let settingsmenu = document.querySelector(".settings-menu"); function hideElem() { el.hidden = true } function showElem() { el.hidden = false }

 <button onclick="hideElem()">Hide TEST</button> <button onclick="showElem()">Show TEST</button> <div class="settings-menu"> <div id="test">TEST</div> </div>