How to remove specific elements using the removeChild

Question

generating load chunks with the following code:

function loadChunk (ndx){
            var passId = "zChunk" + ndx;
            var zPos = ndx * 24;
            var addEl = document.createElement('a-entity');
            addEl.setAttribute("id", passId);
            addEl.setAttribute("gltf-model", "#bound");
            addEl.object3D.position.set(0, 0, zPos);
            sceneEl.appendChild(addEl);
        }

now I am trying to remove chunks too far away from me:

        function stepLoad(cPos){
        
            if (cPos / 24 - loadId < 0.5){
            return;
            }
            else if(cPos > loadId){
            loadId ++;
            loadChunk(loadId + 12);
            console.log('load');
            sceneEl.removeChild(getElementById("zChunk" + (loadId -13)));
            //retrieve chunk with (loadId - 12) and unload it
            }
            else{
            return;
            }
        };

cPos is camera position.

loadId is keeping track of what I have currently loaded.

So for now where ignoring that there is no code for loading and unloading in the other direction, which will be inside the else statement. Right now I am looking at sceneEl.removechild, where I fail to generate a proper reference to the element with the id "zChunk-13". I have checked, the generated element has the proper Id. I'm guessing it has something to do with nesting math in a getElementById nested inside removechild, even if I could make it work with different syntax, I would prefer something cleaner. Any fixes?

Answer 1

getElementById() is a method of the document object. Hence you should call document.getElementById() instead.