如何使用按钮隐藏表格行

Question

这里有一个表数据的示例代码，我想使用x按钮，id选择器和/或使用php增量变量来隐藏行，可以使用JavaScript，{{ 1}}或Jquery ？，请提供您的建议和建议

CSS

Answer 1

document.querySelector('.elemEvent').addEventListener('click',e=>{
  if (e.target.tagName=='BUTTON')  e.target.parentElement.parentElement.style.display='none'
})

<table class="elemEvent" border="1">
  <thead>
    <th>Sample Head</th>
    <th>Sample Head</th>
    <th>Sample Head</th>
    <th>Sample Head</th>
    <th>Sample Head</th>
  </thead>
  <tbody>
    <tr>
      <td>Sample Data 1</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>
        <button type="submit">X</button>
      </td>
    </tr>
    <tr>
      <td>Sample Data 2</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>
        <button type="submit">X</button>
      </td>
    </tr>
    <tr>
      <td>Sample Data 3</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>
        <button type="submit">X</button>
      </td>
    </tr>
    <tr>
      <td>Sample Data 4</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>
        <button type="submit">X</button>
      </td>
    </tr>
    <tr>
      <td>Sample Data 5</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>
        <button type="submit">X</button>
      </td>
    </tr>
    <tr>
      <td>Sample Data 6</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>
        <button type="submit">X</button>
      </td>
    </tr>
    <tr>
      <td>Sample Data 7</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>
        <button type="submit">X</button>
      </td>
    </tr>
    <tr>
      <td>Sample Data 8</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>
        <button type="submit">X</button>
      </td>
    </tr>
    <tr>
      <td>Sample Data 9</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>
        <button type="submit">X</button>
      </td>
    </tr>
    <tr>
      <td>Sample Data 10</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>
        <button type="submit">X</button>
      </td>
    </tr>
    <tr>
      <td>Sample Data 11</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>Sample Data</td>
      <td>
        <button type="submit">X</button>
      </td>
    </tr>
  </tbody>
</table>