javascript - 我根据 jQuery 中的用户输入创建了一个网格(div)，如何重置并重新开始

Question

我现在正在学习 JS 和 JQuery，并且正在制作一个绘图游戏，现在我需要能够重置游戏。

用户在开始时会收到提示并选择网格大小。现在，当我重置时，系统会再次询问用户，但我找不到正确删除现有单元格的方法。

我认为这可能与我如何组织我的职能有关？

任何帮助都会很棒，我将两个选项放在脚本底部。

提前致谢

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 1

尝试删除所有.cell

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

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

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