如何通过单击按钮显示页面元素？

Question

First I'll show my code

const mainButton = document.getElementById("start__button").addEventListener("click", function(event){
    event.target.parentNode.removeChild(event.target);
});

By clicking button, I want it to disappear and then appear new elements on page like navbar etc. The problem is I can't handle it at this point and I need some help:P

Answer 1

As indicated by the tags on your posts, you are using jQuery. So, try the following:

First, add the display: none style to all elements that should be hidden at the beginning. You can for convenience use a hidden class.

.hidden {
  display: none;
}

Then, add an onclick event to the button that hides the button and reveals all previously hidden elements.

$("start__button").on("click", function() {
  $(this).hide();
  $(".hidden").show();
});

Answer 2

 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>

This might help you
By the classList.toggle() function, you can toggle the class of the navbar or any other html element on clicking the button and after that using simple css, you can not only hide or show the element but also do other changes
Removing the whole element from the document and then again adding it by element.innerHTML = "..." is not recommended Thanks.

Answer 3

You can group all of the content you want to show after click in a wrapper element.

 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>