jQueryのユーザー入力からグリッド（divs）を作成しました。リセットして再起動する方法

Question

現在、JSとJQueryを学習しています。描画ゲームを作っています。今度はゲームをリセットする必要があります。 。

ユーザは最初にプロンプ​​トを表示し、グリッドサイズを選択します。今リセットすると、ユーザーに再度尋ねられますが、既存のセルを適切に削除する方法が見つけられません。

私は自分の機能をどのように編成しているのだろうと思いますか？

私はスクリプトの一番下に2つのオプションを入れました。事前に

おかげ

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

すべてを削除してみは

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

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

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

Answer 2

あなたresetButtonは、それが既存のグリッドをredimensionates意味、新しいグリッドを作成します...あなたはそれをリサイズする前に、それをクリアしたい場合は、サイズを変更する前にclearButton（）関数を呼び出すことができます。

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

私はあなたの例でテストしましたが、それはトリックでした！ それはあなたが望むものでしたか？