Remove all content using pure JS

I'm looking for a way to remove the entire content of a web page using pure Javascript -- no libraries.

I tried:

document.documentElement.innerHTML = "whatever";

but that doesn't work: it replaces the inside of the <html/> element. I'm looking at replacing the entire document, including if possible the doctype and <?xml declaration.

Answers:

Answer

I think a browser rightfully assumes a page with content-type text/html will always be a web page - so whilst you may do something like...

document.body.innerHTML = '';

It will still have some HTML hanging around.

You could try...

document.documentElement.innerHTML = '';

...which left me with <html></html>.

Yi Jiang did suggest something clever.

window.location = 'about:blank';

This will take you to a blank page - an internal mechanism provided by most browsers I believe.

I think however the best solution is to use document.open() which will clear the screen.

Answer

According to Dotoro's article on the document.clear method, they (since it's deprecated) recommend calling document.open instead, which clears the page, since it starts a new stream.

This way, you avoid the nasty about:blank hack.

Answer
var i = document.childNodes.length - 1;

while (i >= 0) {
  console.log(document.childNodes[i]);
  document.removeChild(document.childNodes[i--]);
}

Removes everything (doctype also) on FF 3.6, Chrome 3.195, and Safari 4.0. IE8 breaks since the child wants to remove its parent.


Revisiting a while later, could also be done like this:

while (document.firstChild) {
  document.removeChild(document.firstChild);
}
Answer

After the page has already fully loaded:

document.write('');
document.close();
Answer

I believe this will do it

document.clear()  //deprecated

window.location = "about:blank"  //this clears out everything
Answer

I believe this will still leave the doctype node hanging around, but:

document.documentElement.remove()

or the equivalent

document.getElementsByTagName("html")[0].remove()

Answer
document.documentElement.innerHTML='';
document.open();

The Document.open() method opens a document for writing. if you dont use open method, you cant modify Document after set innerhtml to empty string

Answer

Im just curious as to why you'd want to do that. Now theres no way that I know of to replace absolutely everything down to the doctype declaration but if you are wanting to go to those lengths why not redirect the user to a specially crafted page that has the template you need with the doctype you need and then fill out the content there?

EDIT: in response to comment, what you could do is strip all content then create an iframe make it fill the entire page, and then you have total control of the content. Be aware that this is a big hack and will probably be very painful - but it would work :)

Answer

REMOVE EVERYTHING BUT --- !DOCTYPE html ---

var l = document.childNodes.length;    
while (l > 1) { var i = document.childNodes[1]; document.removeChild(i); l--; }

TESTED ON FIREFOX WEB INSPECTOR - childNodes[1] IS --- !DOCTYPE html ---

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.