HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM テーブルの deleteCaption() メソッドとは？使い方を解説

HTML DOM の table deleteCaption() メソッドは、HTML ドキュメント内のテーブルから最初の <caption> 要素（表題）を削除するためのメソッドです。JavaScript を使って動的にテーブルのキャプションを取り除きたい場合に活用できます。

構文

deleteCaption() メソッドの基本的な構文は以下の通りです。

object.deleteCaption()

このメソッドは引数を受け取らず、対象のテーブル要素に対して呼び出すだけで、そのテーブルに含まれる最初の caption 要素が削除されます。

サンプルコード

それでは、HTML DOM table deleteCaption() メソッドの具体的な使用例を見ていきましょう。以下の例では、「Remove Caption」ボタンをクリックすると、テーブルからキャプションが削除される仕組みになっています。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
        text-align: center;
    }
    table {
        margin: 2rem auto;
    }
    caption {
        color: #db133a;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
    .show {
        font-size: 1.2rem;
    }
</style>
<body>
<h1>DOM Table deleteCaption() Method Demo</h1>
<table border="2">
<caption>Student Data</caption>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</table>
<button onclick="remove()" class="btn">Remove Caption</button>
<script>
    function remove() {
        var tableCaption = document.querySelector('table').deleteCaption();
    }
</script>
</body>
</html>

実行結果

ブラウザでこのページを開くと、次のように「Student Data」というキャプションが付いたテーブルが表示されます。

HTML DOM テーブルの deleteCaption() メソッドとは？使い方を解説

次に、「Remove Caption」ボタンをクリックしてみましょう。すると、テーブルから caption 要素が削除され、以下のようにキャプションが消えた状態になります。

HTML DOM テーブルの deleteCaption() メソッドとは？使い方を解説

ポイントまとめ

  • deleteCaption() メソッドは、テーブルから最初の <caption> 要素を削除する
  • 引数は不要で、戻り値も返さない
  • querySelector() などで取得したテーブル要素に対して呼び出す
  1. HTML DOM Table createCaption()メソッドとは？構文と使い方をサンプルコードで解説

    HTML DOM の Table createCaption() メソッドは、空の <caption> 要素を新しく生成し、HTML ドキュメント内のテーブルに追加するためのメソッドです。JavaScript を使ってテーブルにタイトル（キャプション）を動的に付加したい場合に活用できます。構文createCaption() メソッドの基本的な構文は以下のとおりです。object.createCaption()パラメータと戻り値このメソッドは引数を受け取りません。呼び出すと、新しく生成された <caption> 要素が戻り値として返されるため、その要素に対して textC

  2. HTML DOM の captionSide プロパティとは？表キャプション位置の設定方法を解説

    HTML DOM の captionSide プロパティは、表（テーブル）のキャプション（caption 要素）の表示位置を取得・設定するために使用されます。指定できるのは垂直方向の位置のみで、「上（top）」または「下（bottom）」のいずれかとなります。 captionSide プロパティの構文 captionSide プロパティを設定する際の基本構文は以下のとおりです。 object.style.captionSide = top|bottom|initial|inherit 設定できる値 値説明 topキャプションを表の上に配置します。デフォルト値です。 bottomキャプシ