如何添加一个按钮来清除所有表格行？

Question

How to add a button to clear All table rows? I want to add this button to my form, and this is the fiddle of my code. I try a lot of ways but I didn't work.

function render(){
     for (let i = 0; i < allMovie.length; i++) {
        var tr = document.createElement('tr');
        tr.setAttribute("id", "mainTR");
        table.appendChild(tr);
    
        var td1 = document.createElement('td');
        td1.textContent = allMovie[i].MovieName11;
        td1.setAttribute("class", "td1");
        tr.appendChild(td1);
        
        var td2 = document.createElement('td');
        td2.textContent = allMovie[i].selectPlatform11;
        td2.setAttribute("class", "td2");
        tr.appendChild(td2);
    
        var td3 = document.createElement('td');
        td3.textContent = allMovie[i].randomRate;
        td3.setAttribute("class", "td3");
        tr.appendChild(td3);
    
        var td4 = document.createElement('td');
        td4.textContent = allMovie[i].monthlyPay11;
        td4.setAttribute("class", "td4");
        tr.appendChild(td4);
    
        var td5 = document.createElement('td');
        td5.setAttribute("id", "td5");
        td5.innerHTML = `<button onclick=remove()> X </button>`
        tr.appendChild(td5);
    }
    }
    
    function remove() { /line10
      var removeOBJ = document.getElementById("mainTR");
      return removeOBJ.remove();
    } 

Answer 1

First, your table structure is not correct, tr (table rows) should be in tbody and current tbody content should be in thead.

Replace your code with following structure:

     <table id="table">
      <thead>
        <tr>
            <th>Movie Name</th>
            <th>Favourite streaming platform</th>
            <th>Movie Rate</th>
            <th>Your pay monthly on Streaming platforms</th>
            <th>Remove</th>
        </tr> 
      </thead>
      <tbody>
        <!-- Your data here -->
      </tbody>
    </table>

In render function instead of appending data in table and you got structure from image above, you should append your data table rows in tbody. That means you should replace your line for table variable like this:

var table = document.querySelector('table > tbody');

Now you have control to insert your data table rows in right place. Then we can go and implement deleting data.

With just new button and event click you can remove all data from tbody like this:

<input type="button" value="Delete data" id="deleteData" onclick="document.querySelector('table > tbody').innerHtml = '';">

Answer 2

You don't really need to assign ids to all rows before you can delete them, you mainly need a reference to the containing table/tbody element. To remove all rows, (ie all tr children of a table's body), use the tableElement.removeChild() function. Like so:

function clearTable() {
    const parent = document.getElementById("tbodyElementId");

    while(parent.firstChild)
    {
        parent.removeChild(parent.firstChild);
    }
}

This assumes you have a structure like this:

<table>
  <thead>...</thead>
  <tbody id="tbodyElementId">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Note that this method does not remove any row(s) in the table header ( <thead> )