Primero mostraré mi código
const mainButton = document.getElementById("start__button").addEventListener("click", function(event){ event.target.parentNode.removeChild(event.target); });Al hacer clic en el botón, quiero que desaparezca y luego aparezcan nuevos elementos en la página, como la barra de navegación, etc. El problema es que no puedo manejarlo en este momento y necesito ayuda: P
Como lo indican las etiquetas en sus publicaciones, está utilizando jQuery. Por lo tanto, intente lo siguiente:
Primero, agregue el estilo display: none a todos los elementos que deben estar ocultos al principio. Por conveniencia, puede usar una clase oculta.
.hidden { display: none; }Luego, agregue un evento onclick al botón que oculta el botón y revela todos los elementos previamente ocultos.
$("start__button").on("click", function() { $(this).hide(); $(".hidden").show(); }); const mainButton = document.getElementById("start__button").addEventListener("click", function(event){ document.getElementById("navbar").classList.toggle("hidden"); }); .hidden{ display:none; } <navbar id="navbar">My navbar body....</navbar> <button id="start__button">My Button</button> Esto podría ayudarte
Mediante la función classList.toggle() , puede alternar la clase de la barra de navegación o cualquier otro elemento html al hacer clic en el botón y, luego, con CSS simple, no solo puede ocultar o mostrar el elemento, sino también realizar otros cambios.
No se recomienda eliminar todo el elemento del documento y luego volver a agregarlo mediante element.innerHTML = "..." . Gracias.
Puede agrupar todo el contenido que desea mostrar después de hacer clic en un elemento contenedor.
const mainButton = document.getElementById("start__button"); mainButton.addEventListener("click", function(event){ this.remove(); document.querySelector('main').classList.remove('hidden') }); .hidden { display: none; } main > * { padding: 1rem; } nav, footer { background: black; color: #fff; } <button id="start__button">start</button> <main class="hidden"> <nav>Navigation</nav> <section>Content</section> <footer>Footer</footer> </main>