テキストの削除/JavaScript

テキストを削除する

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

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

<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タグが消えます。実行結果の見た目上は、最初のデモと同じでテキスト表示が消えます。