JavaScript入門講座

Home > DOMによるノードの削除

DOMによるノードの削除

ノードを削除する場合は、removeChildメソッドを使用します。

ノード.removeChild(削除するノード)

以下のサンプルでは、ドキュメントに追加したリンクをremoveChildメソッドを使用して全て削除しています。

<html>
<head>
<title>JavaScript addNode</title>
<script type="text/javascript">
function addNode(){
	//要素ノード(タグ)作成
	var anchor = document.createElement("a");
	var br = document.createElement("br");
	
	anchor.href = fm.url.value;
	//テキストノード作成
	var siteName = document.createTextNode(fm.siteName.value);
	//アンカータグにテキストノード追加
	anchor.appendChild(siteName);

	//追加先取得
	var link = document.getElementById("link");

	//要素ノードを追加
	link.appendChild(anchor);
	link.appendChild(br);

}
function deleteNode(){
	var link = document.getElementById("link");
	//ノードが存在するかチェック
        if (link.hasChildNodes()){
		//ノードが無くなるまで削除を繰り返す
                while (link.childNodes.length > 0){
        		link.removeChild(link.lastChild);
		}
        }
}
</script>
</head>
<body>
<form name="fm">
サイト名:<br />
<input type="text" name="siteName" size="50" /><br />
URL:<br />
<input type="text" name="url" size="50" /><br />
<input type="button" id="add" value="追加" onclick="addNode()">
<input type="button" id="del" value="削除" onclick="deleteNode()">
</form>
<div id="link"></div>
</body>
</html>