Question

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 deleteObject function it is removing the element(s) by using the removeChild statement (as seen below).

See this jsfiddle for what I’m trying to accomplish. Right now the fiddle works but my code still does not. I think it has to do with the “top” keyword. See this question for my thoughts on that.

Like I said earlier I have an element called “container1” that needs to be removed and then I have a new “container1” that needs to be created. When I remove the code out of the deleteObject function my new “container1” displays, however, when I include the code it appears to conflict and the new “container1” never gets displayed.

I’m wondering is there some sort of javascript caching that is going on? As the remove and create functions are called back to back. Is there a way that I can use the code that I have but add some sort of delay?

Any advice appreciated!

    function deleteObject(id) {
        try {
            var obj = document.getElementById(id);
            obj.parentNode.removeChild(obj);
        } catch (e) {}
        //do something
    }

function hidePopWin() {
    if (gPopupMask == null) {
        return;
    }

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

    popuplayer--;

    if (popuplayer == 0) {
        gPopupIsShown = false;
        gPopupContainer = this.undefined;
        gPopupIframe = this.undefined;
    } else {
        var showmask = document.getElementById('popupMask_' + popuplayer);
        if (showmask) {
            showmask.style.display = "block";
            gPopupContainer = document.getElementById("popcont_" + popuplayer);
            gPopupIframe = document.getElementById("iframe_layer" + popuplayer);
        }
    }
    //console.log("got here: " )
}

UPDATE:
This jsfiddle is more accurately displaying what is going on(however, in the fiddle it works, but internally it doesn’t): See this question for further information

Answer 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.