removeChild Syntax - I Need A Pair of Experienced Eyes

Question

I am using the removeChild method for the first time. I have use javascript to modify my navbar so that it changes to fixed position and and scroll with the user. This causes the content of the body div to jump up slightly when this happens. As a result, I have managed to insert a red box (it will later be white) to take up the extra space when the navbar's position changes.

I need that red box to be removed when the user scrolls back to the top but I can't seem to get the remove child function to fire. If somebody could take a look and point me in the right direction that would be swell!

code (relevant code section is in bold):

var fillerState = false;
// fixed positioning on scroll property for taskbar:
    window.addEventListener('scroll', function (evt) {
      var distance_from_top = document.body.scrollTop;
      if (distance_from_top <= 80) {
        document.getElementById("navBar").style.position = "static";
        document.getElementById("navBarList").style.borderBottom = "solid black 4px";
        document.getElementById("navBar").style.borderTop = "initial";
        var myCollection = document.getElementsByClassName("navBarLink");
        var collectionLength = myCollection.length;
        for(var i = 0; i < collectionLength; i++){
            myCollection[i].style.borderTopLeftRadius = "1em";
            myCollection[i].style.borderTopRightRadius = "1em";
            myCollection[i].style.borderBottomLeftRadius = "initial";
            myCollection[i].style.borderBottomRightRadius = "initial"; 
            }
// stops loads of boxes from forming:
        **if(fillerState == true){
            var parentRemove = document.getElementById("bodyDiv");
            var fillerBoxRemove = document.getElementById("fillerBox");
            parentRemove.removeChild(fillerBoxRemove);
            fillerState = false;
            alert(fillerState);**
        }

      }


        else if(distance_from_top > 80) {
            document.getElementById("navBar").style.position = "fixed";
            document.getElementById("navBar").style.top = "0px";
            document.getElementById("navBar").style.borderTop = "solid black 4px";
            document.getElementById("navBarList").style.borderBottom = "initial";
            var myCollection = document.getElementsByClassName("navBarLink");
            var collectionLength = myCollection.length;
            if(fillerState == false){

        // sets filler element so that the page doesn't bounce:
                var filler = document.createElement("div");
                filler.style.width = "200px";
                filler.style.height = "80px";
                filler.style.backgroundColor = "red";
                filler.style.id = "fillerBox";

        //defines where the new element will be placed:
                var parent = document.getElementById("bodyDiv");
                var brother = document.getElementById("leftColumn");
                parent.insertBefore(filler,brother);
                fillerState = true;

            }



            for(var i = 0; i < collectionLength; i++){
                myCollection[i].style.borderTopLeftRadius = "initial";
                myCollection[i].style.borderTopRightRadius = "initial";
                myCollection[i].style.borderBottomLeftRadius = "1em";
                myCollection[i].style.borderBottomRightRadius = "1em"; 
                }
        } 

    });

Answer 1

as squint pointed out, when you're making the element, you're setting it's style.id, which is not right.

Change:

filler.style.id = "fillerBox";

To:

filler.id = "fillerBox";

And your code will work.

Alternatively, you can do as others have suggested and create the box in the html itself, set it to a class that has no display, then change it's class. Not only easier, but also stops you from creating and destroying. less resource intensive that way.