按钮单击时未清除 Div 容器答案

【问题标题】：Div container not getting cleared on button click按钮单击时未清除 Div 容器
【发布时间】：2020-08-07 20:00:22
【问题描述】：

我正在用 Javascript、HTML、CSS、Bootstrap 构建一个示例网球俱乐部项目。在这个项目中，我有登录页面（index.html），管理播放器页面，现在在这个管理播放器页面中我有两个按钮添加播放器和显示播放器。在点击show player按钮时，我想在表格中显示数据，但是我面临的问题是，当我多次点击按钮时，它会继续在下面生成表格一个接一个，不清除前一个表。

下面是代码文件和截图

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.....")
}

截图

有什么解决办法吗？

【问题讨论】：

因为看起来你保留了appendChild（它附加了内容）。在添加之前，您必须先清除内容，例如在表格元素上使用.innerHTML = "";...然后添加新行
请检查元素是否已经存在。如果不是，则 createElement else 附加到元素。
给出的JS代码很复杂。减少代码

标签： javascript html css bootstrap-4

【解决方案1】：

我没有仔细阅读代码，但你可以这样做来避免这种情况您可以创建一个布尔变量并在有人单击按钮时分配 true 并且您应该编写一个 if 条件以仅检查该变量是否为 true 然后您应该创建表代码看起来像这样 ` var istableCreated = false; if(istableCreated == false){

istableCreated = true; //创建表

}

【讨论】：

saifkhan ：谢谢你的兄弟......你的解决方案对我有用......祝你有美好的一天......再次感谢你...... :)