Create elements and remove previously created ones in javascript

Question

I think my created divs are overloading the page. Is there a way to clear/destroy created elements after a certain period.

Here is the code but for better understanding please see: link

    var ct = 0;
    let max = 180;
    let min = -180;
    var xMrgn = 0;
    var yMrgn = "440px";
    function startCounter() {
        if (ct < 50) {
            var bbls = document.querySelector('.bbls-amount').value;
            var bblSpeed = document.querySelector('.bbls-speed').value;
            document.getElementById('bblsQty').innerHTML = bbls
            var b = Math.floor(Math.random() * (bbls - 3 + 1) + 3);
            for (let i = 0; i < b; i++) {
                var a = Math.floor(Math.random() * (max - min + 1) + min);
                xMrgn = a + "px";
                let div = document.createElement('div');
                div.className = 'bubbles';
                dv.appendChild(div);
                var msxS = bblSpeed * 14;
                var minS = bblSpeed * 6;
                var s = Math.floor(Math.random() * (msxS - minS + 1) + minS);
                $(".bubbles").animate({
                    "marginLeft": xMrgn, 
                    "bottom": yMrgn
                }, s);
            }
        }
        document.getElementById('txt').innerHTML =  ct;
        var counter = setTimeout(startCounter, 1000);
        ct = (ct < 50) ? ct + 1 : 0;
    }
    startCounter()

Answer 1

There was a lot of confusing variable names and a lot of "var"s so I've changed the code quite a bit for when I had to understand what everything meant.

let counter = 0;
let max = 180;
let min = -180;
let marginLeft = "0px";
let marginBottom = "440px";
const timer = setInterval(update, 1000);
const bubbles = [];

function update() {
    if (counter < 50) {
        const bubbleQuantity = document.querySelector(".bbls-amount").value;
        const bubbleSpeed = document.querySelector(".bbls-speed").value;
        document.getElementById("bblsQty").innerHTML = bubbleQuantity;
        // document.getElementById('bblsSpeed').innerHTML = bubbleSpeed;
        let amountOfBubbles = Math.floor(
            Math.random() * (bubbleQuantity - 3 + 1) + 3
        );
        for (let i = 0; i < amountOfBubbles; i++) {
            let a = Math.floor(Math.random() * (max - min + 1) + min);
            marginLeft = a + "px";
            let bubble = document.createElement("div");
            bubbles.push(bubble);
            bubble.className = "bubbles";
            dv.appendChild(bubble);
            let msxS = (1100 - bubbleSpeed) * 14;
            let minS = (1100 - bubbleSpeed) * 6;
            let s = Math.floor(Math.random() * (msxS - minS + 1) + minS);
            $(".bubbles").animate(
                {
                    marginLeft: marginLeft,
                    bottom: marginBottom,
                },
                s
            );
        }
    }

    document.getElementById("txt").innerHTML = counter;

    counter = counter < 50 ? counter + 1 : 0;

    for (const i in bubbles) {
        if (bubbles[i].style.bottom.split("px")[0] > dv.clientHeight) {
            bubbles[i].remove();
            bubbles.splice(i, 1);
        }
    }
}

function stopCounter() {
    clearInterval(timer);
    counter = 0;
}

function cssVsrs(x) {
    let mrg = "--mrgn";
    let mrgVal = x;
    let r = document.querySelector(":root");
    r.style.setProperty(mrg, mrgVal);
}

Here's a solution much closer to your original code:

let ct = 0;
let max = 180;
let min = -180;
let xMrgn = "0px";
let yMrgn = "440px";
let timer;
const bubbles = [];

function startCounter() {
    if (ct < 50) {
        const bbls = document.querySelector(".bbls-amount").value;
        const bblSpeed = document.querySelector(".bbls-speed").value;
        document.getElementById("bblsQty").innerHTML = bbls;
        // document.getElementById('bblsSpeed').innerHTML = bblSpeed;
        let b = Math.floor(Math.random() * (bbls - 3 + 1) + 3);
        for (let i = 0; i < b; i++) {
            let a = Math.floor(Math.random() * (max - min + 1) + min);
            xMrgn = a + "px";
            let div = document.createElement("div");
            bubbles.push(div);
            div.className = "bubbles";
            dv.appendChild(div);
            let msxS = (1100 - bblSpeed) * 14;
            let minS = (1100 - bblSpeed) * 6;
            let s = Math.floor(Math.random() * (msxS - minS + 1) + minS);
            $(".bubbles").animate(
                {
                    marginLeft: xMrgn,
                    bottom: yMrgn,
                },
                s
            );
        }
    }

    document.getElementById("txt").innerHTML = ct;

    ct = ct < 50 ? ct + 1 : 0;

    timer = setTimeout(startCounter, 1000);

    for (const i in bubbles) {
        if (bubbles[i].style.bottom.split("px")[0] > dv.clientHeight) {
            bubbles[i].remove();
            bubbles.splice(i, 1);
        }
    }
}

function stopCounter() {
    clearTimeout(timer);
    ct = 0;
}

function cssVsrs(x) {
    let mrg = "--mrgn";
    let mrgVal = x;
    let r = document.querySelector(":root");
    r.style.setProperty(mrg, mrgVal);
}

startCounter();

When coding try to avoid unreadable variable names, especially if you want someone else to read it, for example on stack overflow. If you want to keep the shorter variable names, please leave comments for what the variables are and how they are used. It is highly appreciated.