如何删除bootstrap中的特定表行

<table class="table">
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr id="targetRow1">
      <td>行1的数据1</td>
      <td>行1的数据2</td>
      <td>行1的数据3</td>
    </tr>
    <tr id="targetRow2">
      <td>行2的数据1</td>
      <td>行2的数据2</td>
      <td>行2的数据3</td>
    </tr>
    <tr id="targetRow3">
      <td>行3的数据1</td>
      <td>行3的数据2</td>
      <td>行3的数据3</td>
    </tr>
  </tbody>
</table>

$(document).ready(function() {
  // 选择目标行并删除
  $("#targetRow2").remove();
});

document.addEventListener("DOMContentLoaded", function() {
  // 选择目标行并删除
  var targetRow = document.getElementById("targetRow2");
  targetRow.parentNode.removeChild(targetRow);
});