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>
DOMとは | ノードの取得 | ダイレクトアクセスによる取得 | ノードウォーキングによる取得 | ノード属性の取得 | ノード属性の設定 | ノードの追加 | ノードの削除