Middi Middi - 1 month ago 5
jQuery Question

I created a grid(divs) from user input in jQuery, how to reset and start again

I'm learning JS and JQuery at the moment and I am making a drawing game, now I need to be able to reset the game.

The user gets prompted at the beginning and selects grid size. Now when I reset, the user gets asked again but I cannot find a way to remove my existing cells properly.

I think maybe it is to do with how I'm organising my functions?

Any help would be amazing, I put two of my options in there at the bottom of the script.

Thanks in advance

http://codepen.io/Middi/pen/rrgqOv




$(document).ready(function() {


createGrid();

});


function createGrid() {


// if('.cell'.length > 0) {
//
// $(.cell).remove()
//
// }




var boxes = prompt("select a grid between 2 - 128?","0");


var x = parseInt(boxes);

if(x > 128) {

alert("must be between 1-128");
}

else {


}

for(elementCount = 0; elementCount < x; elementCount++) {

$('#container').append('<div class="col"></div>');



}

for(columnCount = 0; columnCount < x; columnCount++) {

$('.col').append('<div class="cell"></div>');

$(".cell").width(572/x);
$(".cell").height(572/x);
}






$('.cell').mouseenter(function () {
$(this).addClass('highlight');

});


}





function clearButton() {
$(".cell").removeClass('highlight');

}

// --------- OPTION ONE ---------- //

// function resetButton() {
// $('#container').remove('.cell');

// }



// -------- OPTION TWO ---------- //

function resetButton() {
createGrid();

}

Answer

Try remove all .cell

//like $('#container').empty()

function removeCell() {
   $('#container').empty()
}

function resetButton() {
    removeCell();
    createGrid();
}
Comments