How can I remove divs and then reinsert them? (using javascript only)

Well I have the following interface:

Theideais:bypressingtheleftbutton,forexample,thepageshoulddisplaythemonthbeforethecurrentaswellasthenumberofsquaresrelativetothenumberofdaysofthosemonths(31inMay,whatisbeingdisplayedand30inApril,whatshouldbedisplayed).

Myideaisthis:Iwillremoveallsquaresandthenaddthemagainaccordingtothenumberofdaysofthemonththatshouldbedisplayed.Forexample,themonthofMaydisplays31squares,clickingonthebuttonontheleftshoulddisplaythemonthofApril,soIshouldremovethe31squaresandadd30,relativetothenumberofdaysinApril.

But,Icanevenremovethesquares,resultinginthis:

ButwhenItrytoaddthesquaresagainIgetawhitescreen:

Before After Notethatthepagetitlechangestothefilename

HereisthecodeI'musing(javascript):

functionretornaMes(){varmes=document.getElementById("barraLateral");
    var ano = document.getElementById("ano");

    var meses = Array('Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro')

    var mesAntigo = meses.indexOf(mes.innerHTML);
    var mesNovo = meses[mesAntigo - 1];

    if (mesAntigo - 1 == -1){
        mesNovo = meses[11];

        var novoAno = parseInt(ano.innerHTML);
        novoAno = novoAno - 1;

        ano.removeChild(ano.firstChild);
        var novoAno = document.createTextNode(novoAno.toString());
        ano.appendChild(novoAno);
    } 

    mes.removeChild(mes.firstChild);
    var novoMes = document.createTextNode(mesNovo);
    mes.appendChild(novoMes);

    apagaDias(mesAntigo);
    mesAntigo -= 1;
    geraDias(mesAntigo);
}

Function responsible for rewinding the month, call onclick the left button

function avancaMes() {
    var mes = document.getElementById("barraLateral");

    var meses = Array('Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro')

    var mesAntigo = meses.indexOf(mes.innerHTML);
    var mesNovo = meses[mesAntigo + 1];

    if (mesAntigo+ 1 == 12){
        mesNovo = meses[0];

        var novoAno = parseInt(ano.innerHTML);
        novoAno = novoAno + 1;

        ano.removeChild(ano.firstChild);
        var novoAno = document.createTextNode(novoAno.toString());
        ano.appendChild(novoAno);
    }

    mes.removeChild(mes.firstChild);
    var novoMes = document.createTextNode(mesNovo);
    mes.appendChild(novoMes);

    apagaDias(mesAntigo);
    mesAntigo += 1;
    geraDias(mesAntigo);
}

Function responsible for advancing the month, call on right button onclick

function apagaDias(mes) {
    var dias = document.getElementById('quadradoDeData');
    diasPorMes = Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);

    for (var j = 0; j < diasPorMes[mes]; j++) {
        dias = document.getElementById('quadradoDeData').remove();
    }

    return false;
}

Function responsible for erasing squares

function geraDias(mes) {
    var distanciaX = 0;

    diasPorMes = Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);

    for (i = 1; i <= diasPorMes[mes]; i++) {

        if (i < 10){
            if (i <= 7) {
                distanciaX = 14 + 90 * (i -1);
                document.write("<div id='quadradoDeData' style='margin: -475px 0px 0px "+distanciaX+"px;'>0"+i+"</div>");
            } else if (i <= 14) {
                distanciaX = 14 + 90 * ((i - 7) - 1);
                document.write("<div id='quadradoDeData' style='margin: -385px 0px 0px "+distanciaX+"px;'>0"+i+"</div>");
            }
        }else{
            if (i <= 14) {
                distanciaX = 14 + 90 * ((i - 7) - 1);
                document.write("<div id='quadradoDeData' style='margin: -385px 0px 0px "+distanciaX+"px;'>"+i+"</div>");
            }else if (i <= 21){
                distanciaX = 14 + 90 * ((i - 14) - 1);
                document.write("<div id='quadradoDeData' style='margin: -295px 0px 0px "+distanciaX+"px;'>"+i+"</div>");
            }else if (i <= 28) {
                distanciaX = 14 + 90 * ((i - 21) - 1);
                document.write("<div id='quadradoDeData' style='margin: -205px 0px 0px "+distanciaX+"px;'>"+i+"</div>");
            }else{
                distanciaX = 14 + 90 * ((i - 28) - 1);
                document.write("<div id='quadradoDeData' style='margin: -115px 0px 0px "+distanciaX+"px;'>"+i+"</div>");
            }

        }
    }
}

Function responsible for resetting squares

In short, I want to understand why I get this white screen when I try to include the squares again, I hope I have clarified everything.