要素の削除

要素の削除

クリックすると削除されます

マウスカーソルが「クリックすると削除されます」の表示領域に入ると「マウスが来た」に表示が変わります。表示領域から離れると「クリックすると削除されます」に戻ります。表示領域でクリックすると文字が消えます。

HTML

 <p id="remove">クリックすると削除されます</p>

JavaScript

 window.onload = function() {
    var elm = document.getElementById('remove');
        // p要素クリック時の処理
        elm.onclick = function(){
            var p = elm.parentNode;//親はbody
            elm.parentNode.removeChild(elm);
        };

        elm.onmouseenter = function(){
            elm.innerHTML = "マウスが来た";
        };
        elm.onmouseleave = function(){
            elm.innerHTML = "クリックすると削除されます";
        };
};

onclickはid="remove"で関連付けた<p>タグがクリックされたときに呼び出される関数です。
elm.parentNodeは親ノードである<body>です。この<body>がremoveChild(elm)で<p>タグを削除します。
onmouseenterは表示範囲にマウスカーソルが入ったときに呼び出されます。
onmouseleave表示範囲からマウスカーソルが離れたときに呼び出されます。

このように<p>タグなどに対する操作をJavaScriptで実現することができます。