Created a function that draws a table and passed an array to it. I specify the number of columns and rows in input, press a button and draw a table, and when I change the value in input and press again, a new table appears, but the old one is not deleted. How to write to the function delete the old table?

function createTable(tableData) { var table = document.createElement('table'); var tableBody = document.createElement('tbody'); tableData.forEach(function(rowData) { var row = document.createElement('tr'); rowData.forEach(function(cellData) { var cell = document.createElement('td'); cell.appendChild(document.createTextNode(cellData)); row.appendChild(cell); }); tableBody.appendChild(row); }); table.appendChild(tableBody); document.body.appendChild(table); } document.querySelector(".btn").addEventListener("click", function() { var row = document.querySelector(".col1").value; var col = document.querySelector(".col2").value; var row_mas = []; var col_mas = []; for (var i = 0; i < row; i++) { var col_mas = []; for (var j = 0; j < col; j++) { col_mas.push(0); } row_mas.push(col_mas); } createTable(row_mas); }); 
 body { margin-top: 10%; margin-left: 40%; } th, td { width: 50px; border: 1px solid red; font-size: x-large; color: white; } tbody { background-color: blue; } input { width: 20px; height: 20px; } 
 <input type="text" class="col1"> <input type="text" class="col2"> <button class="btn">Go</button>

  • I rules the answer a bit. See the improved version with the supplement - Yuri

1 answer 1

To remove DOM elements, it is best to use the remove function.

We first have to check if the table exists. If it exists, then we delete all the tables. Removal can be done by loop or without it. But I tend to create a loop that would delete all the tables if it is not one.

And the newly created tables should also be attached to the class, so that other (necessary) tables on the page would not be deleted:

 function createTable(tableData) { var table = document.createElement('table'); var tableBody = document.createElement('tbody'); // Проверяем на наличие таблицы if(document.querySelectorAll('._Table').length > 0){ for(var i = document.querySelectorAll('._Table').length - 1; i >= 0; i--){ document.querySelectorAll('._Table')[i].remove(); // Удаляем таблицу }; }; table.classList.add('_Table'); tableData.forEach(function(rowData) { var row = document.createElement('tr'); rowData.forEach(function(cellData) { var cell = document.createElement('td'); cell.appendChild(document.createTextNode(cellData)); row.appendChild(cell); }); tableBody.appendChild(row); }); table.appendChild(tableBody); document.body.appendChild(table); } document.querySelector(".btn").addEventListener("click", function() { var row = document.querySelector(".col1").value; var col = document.querySelector(".col2").value; var row_mas = []; var col_mas = []; for (var i = 0; i < row; i++) { var col_mas = []; for (var j = 0; j < col; j++) { col_mas.push(0); } row_mas.push(col_mas); } createTable(row_mas); }); 
 body { margin-top: 10%; margin-left: 40%; } th, td { width: 50px; border: 1px solid red; font-size: x-large; color: white; } tbody { background-color: blue; } input { width: 20px; height: 20px; } 
 <input type="text" class="col1"> <input type="text" class="col2"> <button class="btn">Go</button>

  • It is worth adding a description of what exactly the given code differs from what is in the question. What was the problem and how exactly did it - Grundy
  • @Grundy, I indicated in the code that I added - Yuri
  • it would be better if you described the solution in words, you have a very bad deletion cycle - Grundy
  • one
    request_ row_mas .. - user220409
  • one
    @OlmerDale, = D, I agree, but here it should be noted that the name of the variable is inherited from the author's question, so that the author does not think again) - Duck Learns to Hide