Tuve este caso en el que eliminé los elementos usando document.getElementById para apuntar a quién usar, luego eliminé haciendo element.remove(). Solo quería volver a agregarlo para usar classList.toggle nuevamente
ps 'test' y '.settings-menu' están en el mismo div, solo usé id y class y solo quería saber cómo devolver los elementos después de eliminarlos, también quería usar específicamente el.remove() en lugar de classList.remove() para un propósito específico.
var el = document.getElementById('test'); let settingsmenu = document.querySelector (".settings-menu"); function removeClass(){ el.remove(); } function addclass(){ settingsmenu.classList.toggle() }Este ejemplo ofrece 4 soluciones diferentes:
load , se activa el evento de carga, agregando el elemento secundario <div> a la página.<div> .customStyle al elemento secundario <div> .<div> de la página.<div> a la página. 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>Una forma más fácil es usar 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>