テキストの削除/JavaScript

JavaScriptで、HTML中のテキスト(文字)を削除するサンプルコードです。

目次は、以下の通りです。

  1. テキストを削除する
  2. 要素も削除する

テキストを削除する

 テキストを削除するデモです。

テスト

 ボタンをクリックすると、テキストが削除されます。サンプルコードは、以下の通りです。

【テキストを削除するサンプルコード】
<button type="button" onclick="func1();">削除</button>
<span id="test1">テスト</span>

<script>
function func1() {
    var x = document.getElementById("test1");
    x.innerHTML = "";
}
</script>

 赤字分部のspan内テキストを、青字部分で空にしています。

 この方法は、<span>でなくても<div>や<p>等でも使えます。使い方も簡単ですが、空の要素(span等)が残ります。再度、後で書き換える時は便利です。

要素も削除する

 空の要素を残したくない時、要素ごと削除する方法もあります。

【要素ごと削除するサンプルコード】
<button type="button" onclick="func2();">削除</button>
<span id="test2">テスト</span>

<script>
function func2() {
    var x = document.getElementById("test2");
    x.parentNode.removeChild(x);
}
</script>

 赤字分部で要素ノードを削除しています。つまり、spanタグが消えます。実行結果の見た目上は、最初のデモと同じでテキスト表示が消えます。

  • このエントリーをはてなブックマークに追加