javascript - Remove body element - Stack Overflow

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
How to remove HTML <body> element with all of its content?
var e = document.getElementsByTag('html');
e.removeChild('body');
Does not work.
                "But why on earth would you want to do this?" suppose you wanted to just start over inserting stuff (new body...)
– Mark Schultheiss
                May 24, 2010 at 20:04
                Thats pretty much a given, but I would guess that clearing the body is really only a symptom of bad design (code that is)
– Sean Kinsey
                May 24, 2010 at 20:14
                Just came across this looking for something else but a good reason you might use this is in an afterEach clean up in render tests where you're adding nodes in your tests.
– unruffledBeaver
                Oct 23, 2018 at 23:01
                Chrome will allow what? You to remove the body element? Great. So that's one browser out of … lots (present and future). Corrected the typo.
– Quentin
                May 24, 2010 at 19:50
                Actually, any browser will allow removing the body element. That doesn't make it a good idea.
– Ms2ger
                Jul 16, 2010 at 18:33
                It makes it a hilarious idea, though. You know, as long as your application isn't supposed to do anything serious.
– codetaku
                Aug 9, 2013 at 20:14
var html = document.getElementsByTagName('html')[0];
var body = document.getElementsByTagName('body')[0];
html.removeChild(body);
                That's actually a good question, but this wasn't the question (as presented above). Not sure if there is an accessible setter for document.body; in even case, it is null after having removed it and it should be of type HTMLElement.
– Martin Zeitler
                Jul 11, 2021 at 16:44
                @Dakopatel - see my answer which includes why removing <body> is sometimes called for, the quickest wy to remove it and how to add a new <body> after removing the old one.
– Rounin
                Mar 19, 2022 at 10:18
while(document.body.childNodes.length != 0) {
  document.body.removeChild(document.body.childNodes[0])
                Since someone just upvoted this code: For example 3 would probably be worthwhile to store document.body.childNodes to an array, then iterate down that for removal. Haven't done any benchmarks but that seems intuitive.
– Warty
                May 17, 2015 at 18:33
Try this code it will remove all the content of body tag on click on the button

And if you want to remove content onload then use this  onload="document.body.innerHTML = '';"
This is example Text<br>
<button onclick="document.body.innerHTML = '';">Click me to remove body contents</button>
</body>
</html>
Several people on this page have asked why one might even wish to remove a <body> element from an HTML Document.
Admittedly, it's a seldom-seen approach, but it's almost always because one wishes to remove the current <body> from a document (while keeping the <head>) and then create a new <body> element (to follow the same <head> as before).
So why not, simply empty the existing <body> element via:
document.body.innerHTML = '';
while (HTMLSourceTab.document.body.firstChild) {
  document.body.removeChild(document.body.firstChild);
The answer might be:
If the HTML Document in question is being opened in a new browser tab, these processes (above) can only execute after the DOMContentLoaded event fires.
And they may not execute quickly enough to prevent a brief Flash Of Legacy Body.
Whereas:
document.body.remove();
will normally execute quickly enough after DOMContentLoaded to prevent that flash.
Once the legacy <body> has been removed, a new <body> can be created and added via:
let newBody = document.createElement('body');
document.documentElement.appendChild(newBody);
or (if adding an empty <body>) simply:
document.body = document.createElement('body');
Full code for opening an existing document in a new tab, removing the existing <body> and adding a new <body>:
myNewTab = window.open(myNewTabURL, '_blank');
myNewTab.addEventListener('DOMContentLoaded', () => {
  myNewTab.document.body.remove();
  setTimeout(() => myNewTab.document.body = myNewTab.document.createElement('body'), 800);
myNewTab.focus();
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.