javascript - 如何用新的替换我的网格

Question

有了这个我可以制作一个像 3x3 这样的网格但是如果我想制作一个新的它会堆叠在旧的网格上所以我如何移除旧的网格以便我可以看到新的？

例子:我在行和列中键入 3，然后单击按钮，它将生成一个 3x3 的网格。然后我会再试一次，将网格设为 5x5，所以我在行和列中键入 5，但它只是将它堆叠在旧网格上，所以我该如何用新网格替换它？

$(document).on("click","#gridBtn",function()
{
    
  

// Cal the size of the Main div 
var mapHeight = $("#theMap").height();  // 400 
var mapWidth = $("#theMap").width();  // 400 

// divide it BY 
var rowsLeft = $("#rowValue").val(); 
var columnsTop = $("#columnValue").val(); 

// Cal the size of the box 
var divideHeight = mapHeight / columnsTop;   // 100 
var divideWidth = mapWidth / rowsLeft;     // 100


for (var i = 0; i < rowsLeft; i++) {
 
         $("#theMap").append('<div class="row" style="height:'+divideHeight+'px; width: auto;"></div>');
    }


for (var i = 0; i < columnsTop; i++) {
 
         $(".row").append('<div class="square" style="height:'+divideHeight+'px; width:'+divideWidth+'px;"></div>');
    }



});

#wrapper {
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

#theMap {
  background-color: gray;
  height: 90px;
  width: 90px;
}

.square {
    display: inline-block;
    box-shadow: 0 0 0 1px gold inset;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    
  <div id="theMap"></div>
  
  <div id="inputWrapper">
    <input id="rowValue" type="text" placeholder="rows">
     <input id="columnValue" type="text" placeholder="columns">
     <button id="gridBtn">Create grid</button>
  </div>
 
</div>

Answer 1

我只是将 $("#theMap").html(""); 添加到函数的开头，以清除 #theMap 的内容。这是你想要的吗？

$(document).on("click","#gridBtn",function()
{
    
$("#theMap").html("");

// Cal the size of the Main div 
var mapHeight = $("#theMap").height();  // 400 
var mapWidth = $("#theMap").width();  // 400 

// divide it BY 
var rowsLeft = $("#rowValue").val(); 
var columnsTop = $("#columnValue").val(); 

// Cal the size of the box 
var divideHeight = mapHeight / columnsTop;   // 100 
var divideWidth = mapWidth / rowsLeft;     // 100


for (var i = 0; i < rowsLeft; i++) {
 
         $("#theMap").append('<div class="row" style="height:'+divideHeight+'px; width: auto;"></div>');
    }


for (var i = 0; i < columnsTop; i++) {
 
         $(".row").append('<div class="square" style="height:'+divideHeight+'px; width:'+divideWidth+'px;"></div>');
    }



});

#wrapper {
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

#theMap {
  background-color: gray;
  height: 90px;
  width: 90px;
}

.square {
    display: inline-block;
    box-shadow: 0 0 0 1px gold inset;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    
  <div id="theMap"></div>
  
  <div id="inputWrapper">
    <input id="rowValue" type="text" placeholder="rows">
     <input id="columnValue" type="text" placeholder="columns">
     <button id="gridBtn">Create grid</button>
  </div>
 
</div>