'How to remove all HTML elements after the <header> using javascript? [closed]

I have a website where, under a certain condition, I want to remove every element after the <header> tag. How can I do this with javascript?

<html lang="en">
<head>
...
</head>
<body>

<main>
        <!-- header start -->
        <header>
        ....
        </header>

    <!--- a bunch of sections, divs, etc that I want to not show sometimes -->


    <!--- But I need these scripts to run, and I want to add my javascript to main.js -->
    <script src="./js/jQuery.js"></script>
    <script src="./js/main.js"></script>

</main>
    

</body>
</html>
javascripthtml


Solution 1:[1]

Do you need to actually remove the content, or does hiding it with css work?

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('main').classList.toggle('hide-content');
})
.hide-content > :not(header) {
  display: none;
}

/* light styling; not relevant */
main > * {
  border: 1px solid grey;
  margin: 1em;
  padding: 1em;
}
<main>
  <header>
    <div>Header</div>
    <button>Toggle Content</button>
  </header>
  <div>other stuff</div>
  <section>more stuff</section>
  <div>other stuff</div>
  <section>more stuff</section>  
</main>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ray hatfield

Related Questions