Как заменить мою сетку на новую

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