How to remove all children from an element using jQuery?

Question

I have a script that creates a table with specifications given by the user.

The issue is that when the table is printed more than once, it prints below the other table. Turning a 10x10 table into a 10x20 table. (if that makes sense)

In previous assignments I used:

  //Clean grid
  while(grid.firstChild)
    grid.removeChild(grid.firstChild);

to clear the grid, but this assignment is using jQuery and I am not sure how to do it. I've tried:

  var divBlock = document.getElementById('my_table');
  while (divBlock.firstChild) {
    divBlock.removeChild(divBlock.firstChild);

and

$("#my_table").empty();

and

$("#my_table").remove(); 

and

$('#my_table').remove('table');

but neither seem to work, here is the full code:

// TODO: clear table

var $rows = $("#rows");
var $cols = $("#cols");
var $print_button = $("#print");
var $my_table = $("#my_table");
var $stats = $("#stats");
var arr = [];
var $table_obj = $('<table>');  //Create an element
var $row_obj;
var $col_obj;
var counter = 0;

$print_button.on('click', function() {print_pattern();});

function print_pattern()
{
  // Clear table
  // var divBlock = document.getElementById('my_table');
  // while (divBlock.firstChild) {
  //   divBlock.removeChild(divBlock.firstChild);
  // }
  // $("#my_table").empty();

  $('#my_table').remove('table');


  // Get row and column values
  var r = $rows.val();          //Get value of rows             
element
  var c = $cols.val();      //Get value of cols element
  // Create 2-D Array
  for (var i = 0; i < r; i++) {
    arr[i] = [];
  }
  // Double for-loop to create table
  for (var i = 0; i < r; i++) {
    $row_obj = $('<tr>'); // Create row
    for (var j = 0; j < c; j++) {
      $col_obj = $('<td>');  // Create table cell
      var n = Math.floor(Math.random()*10000)%100;  //Math methods:     
floor and random
      $($col_obj).append(n); // Append random number to table cell
      $($row_obj).append($col_obj); // Append column to row
      $($table_obj).append($row_obj); // Append row to table object
      // if random number > 90 -> make background color yellow
      if (n > 90) {
        $col_obj.css('background-color', 'yellow');   //Change css
        counter++;  // counter for stats
      }
    }
    $($table_obj).append($row_obj); // Append row to table object
  }
  $($my_table).append($table_obj);  // Append table to div container
  // Stats calculation
 $stats.html("<b>" + (counter/(r*c)*100).toFixed(2) + "%<b>");  
//Change html content
  counter = 0; // reset counter
  // event function for removing a row when its clicked on
 $('tr').on('click', function(){  $(this).fadeOut(500);  });
}

So I've tried a number of things, I am not sure if I am just getting the syntax wrong or if I am using the wrong function to clear the div tag.

If anyone can point me in the right direction that would help a lot!

Thank you.

EDIT: I figured out the issue. My original while() block worked fine when I put all the variables inside the function.

Answer 1

First of all, you have to distinguish variables.

A. There is a variable that has to define 1 time, and any changes will be stored on that.

B. And there is a variable that needs to be reset every function called.

variable on condition b you need put inside your function so it won't keep last value and make it has double value (last value + new value)

in this case i could say this variable is on condition b:

$table_obj, $row_obj, $col_obj, arr, ...