Can a javascript function delete the html element that contains it?

Question

For example:

<div class='blah'>
    <script>
        $('.blah').remove();
    </script>
</div>

Edit:

Okay, I got a lot of down-voting for this. I would rather know if this is a good idea, but since that is subjective let me ask: how does javascript handle a function that deletes itself?

This can be useful if the script is meant to replace the containing html with something else (i.e data). I realize that it is roughly equivalent to `$('blah').load(function() { //Do stuff });` somewhere else. I just thought it was neat. — astex, Mar 12 '13 at 21:29
@astex Absolutely not. The script itself would not replace the containing HTML. The script doesn't care about the HTML. That's why it's enclosed in it's own script tags. — David L, Mar 12 '13 at 21:30
Actually... it kinda brings an interesting point. How the JS parsing is implemented? I suppose JS is parsed and put in memory separately from DOM and then executed ? Therefore it should be possible to play around with script DOM elements. Funny :) — pero, Mar 12 '13 at 21:35
So what happens to any functions in that script tag? Do they stay in memory until the end of days? Do they finish executing then disappear? — astex, Mar 12 '13 at 21:36
Maybe this can help: http://stackoverflow.com/questions/1096907/do-browsers-parse-javascript-on-every-page-load look at most voted answer. — pero, Mar 12 '13 at 21:38
I suppose if you define function in global scope then it's stays in memory until you close windows with this page. If you define in private scope or run it straight like: (function() { .. })(); then it should be removed... but those are only my imaginations ;-) — mariozski, Mar 12 '13 at 21:38

score 3 · Accepted Answer · answered Mar 12 '13 at 21:27

3

Yes you can -> http://jsbin.com/ososuh/1

What's more you can define function, which you'll invoke on later time. I suppose it's added on parsing time to memory and it can be invoked later on. Haven't tried it before but must admit it's quite funny ;-)

answered Mar 12 '13 at 21:27

mariozski

1,114
1
7
20

score 1 · Answer 2 · answered Mar 12 '13 at 21:24

First of all, you should never be placing your javascript inline like this. It's bad practice and terrible for web optimization. Second of all, sure, why not?

If you are bound to the element in some way, you can still removed the HTML, though it would not remove the actual script function itself.

$('.blah').bind('click', function () {
    $(this).remove();
}

score 0 · Answer 3 · answered Mar 12 '13 at 21:23

0

Yes. In case of functions that doesn't mean they will be undefined after that, but you can very freely modify the DOM from JavaScript.

answered Mar 12 '13 at 21:23

Squeezy

455
4
11

So the code within a ` – Dai Mar 12 '13 at 21:25
If you redefine it, it will hold the new definition. It doesn't matter where this sources from, as long as it affects the same scope. – Squeezy Mar 12 '13 at 21:27

score 0 · Answer 4 · edited May 23 '17 at 12:21

Look at the answer at Do browsers parse javascript on every page load?

For example:

Chrome : V8 Engine

V8 has a compilation cache. This stores compiled JavaScript using a hash of the source for up to 5 garbage collections. This means that two identical pieces of source code will share a cache entry in memory regardless of how they were included. This cache is not cleared when pages are reloaded.

So, if you hit F5 in Chrome it will detect (via hashing of text of script tag content) that it already has this piece of JavaScript code parsed and compiled into native code. So it will just execute it.

As this already compiled piece of JS code is separated from DOM (in different part of memory) it can manipulate also the DOM element that represents itself. At least that is how I understand the working.

Can a javascript function delete the html element that contains it?

4 Answers4