使用 JavaScript 删除引导表行

Question

我正在尝试创建一个允许用户删除特定行的表；使用 JavaScript 和引导程序。我用的是canonic方式，但是好像不行：`

<form action="scrivi.php" method="POST">    
    <table class="table" id="tab">
      <thead>
        <tr>
          <th scope="col">Docente</th>
          <th scope="col">Prima ora</th>
          <th scope="col">Seconda ora</th>
          <th scope="col">Terza ora</th>
          <th scope="col">Quarta ora</th>
          <th scope="col">Quinta</th>
          <th scope="col">Sesta ora</th>
        </tr>
      </thead>
      <tbody>
      <?php                  
          echo sprintf('<td><button type="button" onClick="rimuovi(0)">Submit</button></td>');
      ?>             
      </tbody> 
    </table>

JavaScript 函数：

fuction rimuovi(i){
    var table = getElementById("tab").deleteRow(0);
}

我知道我可以使用 google Ajax 解决问题，但我记得有一种更简单的方法可以解决它。我尽我所能。

Answer 1

这是一个工作示例

const table = document.getElementById('tab')

table.addEventListener('click',(e)=>{
if(e.target.tagName.toLowerCase()=="button")
{
 table.querySelector("tbody").removeChild(e.target.parentElement.parentElement)
}


})

<table class="table" id="tab">
  <thead>
    <tr>
      <th scope="col">Docente</th>
      <th scope="col">Prima ora</th>
      <th scope="col">Seconda ora</th>
      <th scope="col">Terza ora</th>
      <th scope="col">Quarta ora</th>
      <th scope="col">Quinta</th>
      <th scope="col">Sesta ora</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>hey </td>
       <td>hey </td>
       <td>hey </td>
       <td>hey </td>
       <td>hey </td>
       <td>hey </td>
        <td><button>delet</button> </td>
    </tr>
    <tr>
       <td>hey </td>
       <td>hey </td>
       <td>hey </td>
       <td>hey </td>
       <td>hey </td>
       <td>hey </td>
       <td><button>delet</button> </td>
    </tr>  
    <tr>
       <td>hey </td>
       <td>hey </td>
       <td>hey </td>
       <td>hey </td>
       <td>hey </td>
       <td>hey </td>
       <td><button>delet</button> </td>
    </tr>
  </tbody>