JavaScriptで要素を削除するには実装プログラム
参考コード
<html>
<head>
<title>Javascriptで要素を削除</title>
<script type="text/javascript"><!–
function $(nodeId)
{
return document.getElementById(nodeId);
}
function $Name(tagName)
{
return document.getElementsByTagName(tagName);
}
//メッセージを交換
function replaceMsg()
{
var newNode = document.createElement(“P");//Pタグを作成
newNode.innerHTML = “<font color=’red’>added element</font>";
var oldNode = $Name(“P")[0];//bodyのp要素を取得
oldNode.parentNode.replaceChild(newNode,oldNode);
}
//メッセージを削除
function removeMsg()
{
var node = $(“p2");
var nodeBtn = $(“remove");
//node.parentNode.removeChild(node);
document.body.removeChild(node);
//nodeBtn.parentNode.removeChild(nodeBtn);//削除ボタン
document.body.removeChild(nodeBtn);
//document.body.removeNode();
}
function addbefore()
{
var newNode = document.createElement(“p");
//var newText = document.createTextNode(“before add element");
//newNode.appendChild(newText);
newNode.innerHTML = “<font color=’red’>before add element</font>";
var oldNode = $(“p3");
//document.body.insertBefore(newNode,oldNode);
oldNode.parentNode.insertBefore(newNode,oldNode);
}
function addlast()
{
var newNode = document.createElement(“p");//Pタグの作成
//var newText = document.createTextNode(“last element add");
//newNode.appendChild(newText);
newNode.innerHTML = “<font color=’red’>last add element</font>";
var oldNode = $(“p3");
oldNode.appendChild(newNode);
//document.body.appendChild(newNode);
}
window.onload = function addArrayMsg()
{
var arrayMsg = ['one’,’two’,’three’,’four’,’five’];//配列を作成
var fragment = document.createDocumentFragment();//ドキュメントフラグメントを作成
var newNode ;
for (var i=0 ;i<arrayMsg.length ;i++ )
{
newNode = document.createElement(“P");
var nodeText = document.createTextNode(arrayMsg[i]);
newNode.appendChild(nodeText);//
fragment.appendChild(newNode);
}
document.body.appendChild(fragment);
}
//行を追加
function addRow()
{
var tab = $(“myTable");
var oldTr = $(“handleTr");
var newTr = tab.insertRow();//行の作成
var newTd1 = newTr.insertCell();//セルの作成
var newTd2 = newTr.insertCell();
newTd1.innerHTML = “<input type=’checkbox’ />";
newTd2.innerHTML = “<input type=’text’ />";
}
//行を削除
function removeRow()
{
var tab = $(“myTable");
// if(tab.rows.length>0){
// tab.deleteRow();
// if(tab.rows.length==1)
// tab.deleteCaption();
// }
var cbbox ;
for(var i=0;i<tab.rows.length;i++){
cbbox = tab.rows[i].childNodes[0].childNodes[0];//inputを取得
if(cbbox.checked){
tab.deleteRow(i–);
}
}
}
//全部選択
function selAll(value){
var items = document.all.tags(“input");//ページの全てinputを取得
for(var i = 0;i<items.length;i++){
if(items[i].type=="checkbox"){//checkboxの判断
items[i].checked = value.checked;
}
}
}
//input要素の値を取得
function getInputValue()
{
var inputArray = new Array();//配列を作成
var tab = $(“myTable");
var tbInput;
for(var i=0;i<tab.rows.length;i++){
tbInput = tab.rows[i].childNodes[1].childNodes[0].value;
if(tbInput!=""&&tbInput!=null)
inputArray.push(tbInput);
}
inputArray = inputArray.join(“*^&");
$(“showValue").value = inputArray;
}
var x =’10+20′;
(“alert(x);")
// –></script>
</head>
<body>
<p id="p1″>Hello World!</p>
<input type="button" value="change" onclick="replaceMsg();" />
<p id="p2″>Are you sure delete?</p>
<input type="button" id="remove" value="delete" onclick="removeMsg();" />
<p id="p3″>add element</p>
<input type="button" id="addbefore" value="add befroe" onclick="addbefore();" />
<input type="button" id="addlast" value="add last" onclick="addlast();" />
<p></p>
<div style="border:1px solid blue;height:300px">
<table id="myTable" cellpadding="0″ cellspacing="0″ border="1px solid blue" style="padding:4px;" style="padding:4px;">
</table>
<input type="checkbox" onclick="selAll(this);" />
<input type="button" value="add Row" id="addRow" onclick="addRow();" />
<input type="button" value="remove Row" id="removeRow" onclick="removeRow();" />
<textarea rows="5″ cols="25″ id="showValue" />