Javascript Caching (maybe)?

I have a need to remove an element from my screen and then regenerate an element with the same name. In the code there is a deleteObject function and a appendChild call. In the del

Solution 1:

Even though trivial, perhaps you might have overlooked the DOM actually loading? jsFiddle calls your code on onLoad.

If you call deleteObject('id');, it won't work until the after document/element has been loaded into the DOM, because the ID doesn't exist until then.

Solution 2:

There is no caching in javascript, but objects are not actually destroyed if you have a reference to them in a javascript variable (which it looks like you might in your sample code).

That alone shouldn't keep you from replacing the object in the DOM with another object so there must be something else going on. You would have to include a more complete sample of the code you are asking about that causes the problem (including your HTML), for us to know how to advise your more specifically.

You can simplify the code you did include in your post by using this function:

functiondeleteObject(id) {
    try {
        var obj = document.getElementById(id);
        obj.parentNode.removeChild(obj);
    } catch(e) {}
}

Then, you can call this:

deleteObject('popupMask_' + popuplayer);
deleteObject('popcont_' + popuplayer);

And, this code does not keep a reference to the removed objects in any JS variable so the objects will be destroyed by the JS garbage collector.

Solution 3:

Ok, I tried debugging that thing and it seems related to the removeChild method.

This fixes the issue - setTimeout(function(){obj.parentNode.removeChild(obj)}, 5)

The only explanation I can think of is that the removeChild(iframe-obj) is called from an event of the iframe-obj. So it is not possible to execute javascript code deleting the DOM element from which this code is executed (like <div onclick="this.parent.removeChild(this)"... - not going to remove itself).

This dependency is not obvious in the code, but probably it has something to do with the UI thread and the iframe being another document loaded at the same time. The setTimeout allows the script to run from different execution point (not the one preventing the iframe to be deleted) and so the iframe-obj get removed from the DOM.

That's interesting case.

Solution 4:

It seems you have a couple of things that you might want to consider changing. First, would you want to maintain a sort of state of the container you're adding/removing? Would it make more sense to use bubbling? It's sort of unclear what you're after. Are you asking how to remove an element and create a new element with the same id name? If that's the case then you might want to make that your first object you create in js.

var myDiv = function(data){id: id, init: function(data.id){document.createElement('div'), returninit}

myDiv.init("id") //makes a new div!

Then your next object is the popup, etc...etc...

You know what? A good example of this is sticky notes, sans the localstorage hooks: http://www.webkit.org/demos/sticky-notes/

Solution 5:

I'm not sure whether you'll be ok with this or not, but this is a way to handle: When you already got the reference to the object you're trying to delete, just rename it and then delete. This will make the name in DOM not used, so after adding the new element, it will be unique by its name.