Div container not getting cleared on button click

Question

I am building a sample tennis club project in Javascript,HTML,CSS,Bootstrap. In this project i have login page(index.html),manage player page,now in this manage player page i have two buttons add players and show players. On button click of show players, i want to show data in table, but the problem i am facing is that when i click button multiple times, it keeps on generating tables below one after the another without clearing previous table.

Below are the code files and screenshots

managePlayers.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manage Players</title>

    <!-- ADDING FONT AWESOME CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- ADDING BOOTSTRAP CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <!-- ADDING STYLE.CSS -->
    <link rel="stylesheet" href="/css/style.css">

</head>

<body>

    <!-- ADDING BUTTONS LIKE SHOW PLAYERS, ADD PLAYERS USING CSS BOOTSTRAP -->
    <button type="button" class="btn btn-secondary showplayers" onclick="showplayers();">Show Players</button>
    <button type="button" class="btn btn-secondary addplayers">Add Players</button>

    <!-- ADDING BOOTSTRAP JS -->
    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>

    <!-- ADDING INDEX.JS -->
    <script src="/js/sidebar.js"></script>
    <script src="/js/index.js"></script>

</body>

</html>

index.js

// --------------TESTING CODE FOR LOGIN PAGE LOGIN BUTTON CLICK----------------


var email, password;
document.querySelector(".loginbtn").addEventListener("click", (e) => {
    email = document.querySelector(".email").value;
    password = document.querySelector(".password").value;

    document.querySelector(".labelemailerror").innerHTML = "";
    document.querySelector(".labelpassworderror").innerHTML = "";

    // ------------TESTING CODE FOR CHECKING VALIDATION AND PRINTING ERROR ON LABELS IF ANY-------------

    if (email === "admin@wimbledon.com" && password === "rogerfederer") {
        console.log("Login successfull....");
        window.open("profile.html");
    }
    else if (email === "" && password === "") {

        document.querySelector(".labelpassworderror").innerHTML = "Email and Password cannot be blank"
    }
    else if (email === "") {

        document.querySelector(".labelemailerror").innerHTML = "Email cannot be blank";
    }
    else if (password === "") {

        document.querySelector(".labelpassworderror").innerHTML = "Password cannot be blank"
    }
    else {

        document.querySelector(".labelpassworderror").innerHTML = "Invalid Email or Password";
    }

    console.log(email, password);
    e.preventDefault();
});





//------------------------------------MANAGE PLAYERS----------------------------------


function showplayers() {
    console.log("show players clicked.....");

    //----------TESTING CODE FOR CREATING WRAPPER FOR BOOTSTRAP TABLE FOR RESPONSIVENESS--------

    var myDiv = document.createElement("div");
    myDiv.className = "table-responsive";
    myDiv.id="table-responsive";
    document.body.appendChild(myDiv); 

    const myNode = document.getElementById("table-responsive");
    myNode.innerHTML="";

    

    //-----------TESTING CODE FOR CREATING BOOTSTRAP DYNAMIC TABLE USING JAVASCRIPT-------------

    var myTable = document.createElement("table");
    myTable.style.marginTop = "2%";
    myTable.className = "table";
    myTable.id="table";
    document.body.appendChild(myDiv).appendChild(myTable);



    var myThead = document.createElement("thead");
    document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead);

    var myTr = document.createElement("tr");
    document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr);

    var myThID = document.createElement("th");
    myThID.scope = "col";
    myThID.innerHTML = "ID";
    document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myThID);

    var myThName = document.createElement("th");
    myThName.scope = "col";
    myThName.innerHTML = "Name";
    document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myThName);

    var myThGender = document.createElement("th");
    myThGender.scope = "col";
    myThGender.innerHTML = "Gender";
    document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myThGender);

    var mySubscription = document.createElement("th");
    mySubscription.scope = "col";
    mySubscription.innerHTML = "Subscription";
    document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(mySubscription);

    var myfeeStatus = document.createElement("th");
    myfeeStatus.scope = "col";
    myfeeStatus.innerHTML = "Fee Status";
    document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myfeeStatus);

}

function addplayers() {
    console.log("add players clicked.....")
}

Screenshots

Any solution please ?

because it looks like you keep `appendChild` (which appends content). You would have to clear out the content first before you add, with like a `.innerHTML = "";` on your table element... then add new rows — zgood, Aug 07 '20 at 11:48
please check element already exist or not. If not then createElement else append to the element. — Rayees AC, Aug 07 '20 at 12:03

score 1 · Accepted Answer · answered Aug 07 '20 at 12:00

1

I haven't gone through the code but you can do this thing to avoid that You can create a boolean variable and assign true when someone clicks the button and you are supposed to write an if condition to check only if that variable isn't true then you are supposed to create the table The code will look some thing like this ` var istableCreated = false; If(istableCreated == false){

istableCreated = true; //create the table

}

`

answered Aug 07 '20 at 12:00

Mohammed Khan

118
9

1

saifkhan : thank you brother...you solution worked for me...have a nice day....thank you once again..... :) – Mohit Kumar Sharma Aug 07 '20 at 13:03

Div container not getting cleared on button click

1 Answers1