私のグリッドを新しいものに置き換える方法

Question

これで私は3x3のような鳥を作ることができますが、新しいグリッドを作成したい場合は、古いグリッドにスタックします。新しいもの？

例： 3行と列に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").val(''); // cleans before append again 

    $(".row").val(''); // cleans before append again 

Answer 2

を私は単にの先頭に$("#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>