removeChild javascript 入門
removeChild
removeChildは子要素を削除します。
子要素があるということはどの親要素なのが必要だと思います。
要素.parentNode.removeChild(要素);
サンプル
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(node){
var p = document.createElement(“p”);
var text = document.createTextNode(“追加されました。”);
p.appendChild(text);
var setbody = document.body;
setbody.appendChild(p);
node.parentNode.removeChild(node);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld(this.parentNode)”>
</form>
</body>
<html>
実行結果はボタンが消えて追加されました。が表示されます。
前回のソース残してるのでp要素が作成されてます。
全部消したいなら引数を取らずにbody要素を消せばいいですね。
サンプル
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
var p = document.createElement(“p”);
var text = document.createTextNode(“追加されました。”);
p.appendChild(text);
var setbody = document.body;
setbody.appendChild(p);
setbody.parentNode.removeChild(setbody);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は全部消えましたね。
p要素だけ削除したい時は
サンプル
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
var p = document.createElement(“p”);
var text = document.createTextNode(“追加されました。”);
p.appendChild(text);
var setbody = document.body;
setbody.appendChild(p);
p.parentNode.removeChild(p);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はなにもおこってませんがp要素を作成して削除してますね。
画面の表示を消したいならこれでいいでしょうか。
文法的に気持ち悪いというかp要素のテキストノード消してるだけの
ような気がしますがとりあえずこれでいいのだ！