javascript - 如何使用 jQuery 从元素中删除所有子项？

Question

我有一个脚本可以根据用户指定的规范创建一个表。

问题是，当表格被多次打印时，它会打印在另一个表格的下方。将 10x10 的 table 变成 10x20 的 table 。 (如果这有意义的话)

在之前的作业中我使用了:

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

清除网格，但这个作业使用的是 jQuery，我不知道该怎么做。我试过:

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

和

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

和

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

和

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

但似乎都不起作用，这是完整的代码:

// 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);  });
}

所以我尝试了很多方法，我不确定是我的语法错误还是我使用了错误的函数来清除 div 标签。

如果有人能指出我正确的方向，那将大有帮助!

谢谢。

编辑:我想通了这个问题。当我将所有变量放入函数中时，我原来的 while() block 工作正常。

Answer 1

首先，你要区分变量。

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.

条件 b 的变量，您需要将其放入函数中，这样它就不会保留最后一个值并使其具有双倍值(最后一个值 + 新值)

在这种情况下，我可以说这个变量在条件 b 上:

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