title: Using while loop to clear a canvas instead of remove
body: <p>In the following JavaScript I want to use a while loop to clear and reset a grid instead of the 'remove' function. I can't seem to modify it so it still works. </p>
  
  <pre><code>var height, width, color;
  
  // When size is submitted by user, call makeGrid() 
  $('#sizePicker').submit(function (event) {
  event.preventDefault();
  height = $('#inputHeight').val();
  width = $('#inputWeight').val();
  makeGrid(height, width);
  });
  
  
  //creates grid's row and columns, r=rows, c=columns
  function makeGrid(x, y) {
  $('tr').remove(); //clear grid for next
  
  
  for (var r = 1; r &lt;= x; r++){
      $('#pixelCanvas').append('&lt;tr id=table' + r + '&gt;&lt;/tr&gt;');
      for (var c = 1; c &lt;= y; c++) {
          $('#table' + r).append('&lt;td&gt;&lt;/td&gt;');
      }
  }
  
  //add and clear of colors of cells
  $('td').click(function addColor(){
      color = $('#colorPicker').val();
  
      if($(this).attr('style')) {
          $(this).removeAttr('style')
      } else {
          $(this).attr('style', 'background-color:' +color);
      }
  })
  </code></pre>
  
  <p>This is the function I know works but can't seem to implement</p>
  
  <pre><code>function clearGrid(){
  while (canvas.firstChild){
       canvas.removeChild(canvas.firstChild);
      }
  }
  </code></pre>