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

Question

我有一个脚本，可以根据用户提供的规格创建一个表格。

问题是当表格被打印超过一次时，它会在另一个表格下面打印。将10x10的表格变成了10x20的表格。(如果这样说更容易理解)

在以前的任务中，我使用了:

  //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()块就可以正常工作了。

- Small_Kitten

---

为什么要使用removeChild函数删除所有子元素？如果您只是想从一个DOM中简单地删除所有内容，只需使用dom.innerHTML = ""即可。 - Shqi.Yang

在循环之前，您必须清除$row_obj ='';``$col_obj='';，否则它将保留旧值...... $("#my_table").empty();没有问题。 - 4b0

$("#my_table").html("");? - Ammar

当您将命名函数用作事件处理程序时，无需将其包装在匿名函数中。您可以使用$print_button.on('click', print_pattern);而不是$print_button.on('click', function() {print_pattern();});等。 - Useless Code

Answer 1

首先，您必须区分变量。

A. 有一个变量需要定义1次，任何更改都将存储在其中。

B. 还有一个变量需要在每次调用函数时重置。

条件b的变量需要放在函数内部，这样它就不会保留上一个值，并使其具有双倍值（上一个值+新值）

在这种情况下，我可以说这个变量是处于条件b：

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

- Ardy Setiawan