HTMLのボタンを使用して特定の行を削除する方法


まず、HTMLのテーブルに行を追加します。各行には削除ボタンがあります。

<table id="myTable">
  <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    <th>操作</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td><button onclick="deleteRow(this)">削除</button></td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
    <td><button onclick="deleteRow(this)">削除</button></td>
  </tr>
</table>

次に、JavaScriptの関数を作成して、行を削除します。

function deleteRow(button) {
  var row = button.parentNode.parentNode; // ボタンの親要素の親要素は削除対象の行です
  row.parentNode.removeChild(row); // 行を削除します
}

このJavaScript関数は、ボタンがクリックされると実行され、ボタンの親要素の親要素である行を削除します。

上記のコードを使って、特定の行を削除するボタンがあるテーブルを作成できます。各行には削除ボタンがあり、ボタンをクリックするとその行が削除されます。

この方法を使用すれば、HTMLのボタンを使って特定の行を削除することができます。