How can I make a default state/Clear the container and replace with new items using HTML/CSS/JS-CodePudding

Hello I want to do something very specific and I have scoured stackoverflow but I cant figure out or find it. As seen in the below I want to replace the current container content with the new content user asked for but it appends below the current one(which I dont want) and I have tried remove(), removechild() nothing helps. Also after each pressing button for each property I want the triangle to return to its default state(without animations). So is there a temporary way to add classes or animations using javascript. This is Expected when I click create and This is what I am getting.
Here is the code:
HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
            Trying out CSS
        </title>
        <script src="main.js" defer></script>
        <link href="style.css" rel="stylesheet" type="text/css">
        
    </head>
    <body>
        <div class="upper">Into the Mysteries of Pascal Triangle #Placeholder</div>
        <div class="menu">
            <div><button class="box" onclick="createHexs()">Create</button></div>
            <div><input type="text" id="Text1" maxlength="2 " size="5" style="margin: 5px;">
                Type a number between 1 to 11. 
            </div>
        </div>
        <div class="menu">
            <div><button class="box" onclick="property1()">Property 1</button></div>
            <div><button class="box" onclick="">Property 2</button></div>
            <div><button class="box" onclick="">Property 3</button></div>
            <div><button class="box" onclick="">Property 4</button></div>
            <div><button class="box" onclick="">Property 5</button></div>
            <div><button class="box" onclick="">Property 6</button></div>
            <div><button class="box" onclick="">Property 7</button></div>
        </div>
        <div class="menu">

        </div>
        <div id="createhexagons"></div>
        <div id='workspace'>
            <div class="container">
                <div class="row">
                    <div class="hexagon"><div class="text">1</div></div>
                </div>
                <div class="row">
                    <div class="hexagon"><div class="text">1</div></div>
                    <div class="hexagon"><div class="text">1</div></div>
                </div>
                <div class="row">
                    <div class="hexagon"><div class="text">1</div></div>
                    <div class="hexagon"><div class="text">2</div></div>
                    <div class="hexagon"><div class="text">1</div></div>
                </div>
                <div class="row">
                    <div class="hexagon"><div class="text">1</div></div>
                    <div class="hexagon"><div class="text">3</div></div>
                    <div class="hexagon"><div class="text">3</div></div>
                    <div class="hexagon"><div class="text">1</div></div>
                </div>
                <div class="row">
                    <div class="hexagon"><div class="text">1</div></div>
                    <div class="hexagon"><div class="text">4</div></div>
                    <div class="hexagon"><div class="text">6</div></div>
                    <div class="hexagon"><div class="text">4</div></div>
                    <div class="hexagon"><div class="text">1</div></div>
                </div>
            </div>
        </div>
        <div class="lower">LOWER FOOTER</div>
        
    </body>
</html>

CSS

.row {
    margin-bottom: -30px;
}

.upper{
    background-color: red;
    height: 75px;
    font-size: 30px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: oblique;
    font-weight: 500;
}

.menu{
    display: flex;
    background-color:blue;
    height: 75px;
    align-items: center;
    flex-wrap: wrap;

}

.box{
    background-color: aqua;
    height: 50px;
    width: 100px;
    flex-grow: 1;
    margin: 10px;
}

.lower{
    margin-top: 50px;
    background-color: papayawhip;
    height: 75px;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}
.container>* {
    flex: 0 0 0px;
}

.text{
    text-align: center;
    font-size: 40px;
    padding-top: 25px;
}

.hexagon {
    display: inline-block;
    box-shadow: 10px 10px 5px #000;
    width: 100px; 
    height: 100px;
    background: grey;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: .7s;
    margin: 5px;
}    

.hexagon:hover {
    background: red;
    transform: rotateY(-180deg);
    transition: .5s;
}

.property1{
    background: yellow;
    transition: 1s;
}

var createdHexs = false;

function createHexs(){
    
    if (!createdHexs){
    const container = document.querySelector('.container');
    
    //const hexagonPattern = [1, 2, 3, 4, 5];
    // const _default = document.createElement("div");
    // _default.classList.add("row");
    // const dhexa = document.createElement("div");
    // dhexa.classList.add("hexagon");
    // _default.appendChild(dhexa);
    // console.log(_default);
    // var ele = container.getElementsByClassName("row");
    // console.log(ele.length);
    // for (let e=0; e < ele.length; e  ){
    //     console.log(container.removeChild(ele[e]));
    // }
    // console.log(ele);
    //const numRange = [["1"], ["1", "1"], ["1", "2", "1"], ["1","3","3","1"], ["1","4","6","4","1"]]
    const hexagonPattern = [1];
    var numRange = Array();
    var index = Number(document.getElementById("Text1").value);
    if (index == 0 || index > 11){ 
        if (index > 11){
            alert("Number entered is out of range and Triangle may appear distorted, size was reset to default!");
        }
        for (let i=2; i<=5; i  ){
            hexagonPattern.push(i);
        }
        numRange = generatePascal(5);
    }
    else{
        for (let i = 2; i <= index; i  ){
            hexagonPattern.push(i);
        }
        numRange = generatePascal(index);
    }
    //console.log(generatePascal(5));
    document.getElementById("createhexagons").innerHTML = "Pascal Triangle with 5(n) rows is created";
    for (let i = 0; i < hexagonPattern.length; i  ) {
        const row = document.createElement('div');
        row.classList.add('row');
        for (let j = 0; j < hexagonPattern[i]; j  ) {
            const hexagon = document.createElement('div');
            hexagon.classList.add('hexagon');
            const num = document.createElement('div');
            num.classList.add('text');
            num.innerHTML = numRange[i][j];
            hexagon.appendChild(num);
            row.appendChild(hexagon);
        }
        container.appendChild(row);
        }
    console.log(container);
    createdHexs = true;
    }   
}

function generatePascal(n){
    var arr = [];
    var tmp;
    for(var i=0;i<n;i  ){
        arr[i]=[];
        for(var j=0; j<=i; j  ){
            if(j==i){
                arr[i].push(1);
            }else{
                tmp = (!!arr[i-1][j-1]?arr[i-1][j-1]:0) (!!arr[i-1][j]?arr[i-1][j]:0);
                arr[i].push(tmp);
            }
        }
    }
    return arr;
}

function property1(){
    const container = document.querySelector(".container");
    console.log(container);
    console.log(container.getElementsByClassName("row")[4].getElementsByClassName('hexagon')[2].classList.add("property1"));
}

CodePudding user response：

It looks like you're not clearing the container.

Inside createHexs you could do this:

    ...
    document.getElementById("createhexagons").innerHTML = "Pascal Triangle with 5(n) rows is created";
    container.innerHTML = '';
    for (let i = 0; i < hexagonPattern.length; i  ) {
    ...

I'm not quite sure what you are trying to achieve with the property buttons, but this fixes the double rendering issue.