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
p.s. '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()
}This example offers 4 different solutions:
loads, the load event is triggered, adding the child <div> element to the page.<div> element.customStyle class style to the child <div> element.<div> element from the page.<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>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>