removeChild javascript 入門

      2017/04/19

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要素のテキストノード消してるだけの

ような気がしますがとりあえずこれでいいのだ!

PR



 - javascript 入門

Translate »