Howto delete everything inside using pure javascript?

Question

I'm searching a js one-liner to delete everything inside the <html> Tag.

I want to remove the <head>, the <body> and everything else declared outside those.

Why? You would then not be able to do anything, as the JS will be gone too. — Oded, Oct 02 '12 at 20:07
maybe try to use ajax to load some php script that will remove everyhting — Derfder, Oct 02 '12 at 20:09
Why not? ;) I want to make a Chrome Extension and all it does is to remove everything inside the Webpage. — John, Oct 02 '12 at 20:09
@ChrisW no it wouldn't because the script will be injected by my Browser Extension. — John, Oct 02 '12 at 20:11
-1 What have you tried? http://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript — msanford, Oct 03 '12 at 03:25

score 5 · Accepted Answer · answered Oct 02 '12 at 20:11

5

document.write() will create empty page, or actually the following code:

<html>
  <head></head>
  <body></body>
</html>

But I am not sure if this won't clash if the code will be in external file

answered Oct 02 '12 at 20:11

Zefiryn

score 3 · Answer 2 · answered Oct 02 '12 at 20:15

3

It's not an oneliner, but it does the job you're asking for.

document.open();
document.write("");
document.close();

answered Oct 02 '12 at 20:15

BalusC

No need to open and close the document. Simply calling document.write(), as @Zefiryn mentioned, does the trick. Thanks for your answer – John Oct 02 '12 at 20:23
@John It may appear to work, but I've had problems without using `open` and `close`...which is possible that you may not encounter. – Ian Oct 02 '12 at 20:30
It'll maybe work "perfectly fine" in context of a Chrome Extension script (I can't tell about that from experience; for instance, perhaps Chrome has already implicitly done `document.open()` for you), but it'll not reliably work in context of a normal JS function/script, at least not if you want to keep it cross browser compatible. – BalusC Oct 02 '12 at 20:30
Ah, many thanks for pointing this out @BalusC ! I'm only using this in context of a Chrome Extension. – John Oct 02 '12 at 20:44

score 2 · Answer 3 · answered Oct 02 '12 at 20:20

2

1 liner :)

window.onload = function(){ document.getElementsByTagName("html")[0].innerHTML = "";};

answered Oct 02 '12 at 20:20

Travis J

Tim B James · Answer 4 · 2012-10-03T07:43:08.000

0

Once your HTML page is loaded, the javascript is loaded into the browser memory. So if you are to load jQuery for instance, you can simply call;

$('html').empty();

Give it a try using Google Chrome's Javascript Console. Type the above code, then you can still access jQuery and manipulate the DOM.

Edit

To answer your comment John. You have not stated in your question that jQuery cannot be used.

edited Oct 03 '12 at 07:43

answered Oct 02 '12 at 20:16

Tim B James

1

+1 Also, @John, almost *everywhere* on SO, where a library is disallowed, it's explicitly stated in the question. Simply saying "js" doesn't presume "vanilla EMCAScript". – msanford Oct 03 '12 at 03:25
@msanford unfortunately some people do not know how to construct a good question and others Down vote without thinking. Thanks for +1! – Tim B James Oct 03 '12 at 07:40

score 0 · Answer 5 · answered Jul 13 '23 at 00:37

0

Not really a good idea, but this worked for me.

First, wrap all the elements in a div element with a id.

I made a div with the id wrapper.

Then:

let doc = document.getElementById("wrapper");
doc.innerHTML = "";

answered Jul 13 '23 at 00:37

fg_

5 Answers5