1. 删除节点
删除节点通常借助于其父节点,Node对象提供了如下的方法来删除:
removeChild(oldNode):删除oldNode子节点。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(owen.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 删除子节点 </title>
</head>
<body id="test">
<input id="add" type="button" value="增加" disabled
onclick="add();"/>
<input id="del" type="button" value="删除"
onclick="del();"/>
<div id="target" style="width:240px; height:50px;
border:1px solid black">被控制的目标元素
</div>
<script type="text/javascript">
//获取body元素
var body = document.getElementById("test");
//获取被控制的目标元素
var target = document.getElementById("target");
var add = function()
{
// 添加目标元素
body.appendChild(target);
document.getElementById("add").disabled = "disabled";
document.getElementById("del").disabled = "";
}
var del = function()
{
// 删除目标元素
body.removeChild(target);
document.getElementById("del").disabled = "disabled";
document.getElementById("add").disabled = "";
}
</script>
</body>
</html>
运行结果:
2. 删除列表框、下拉菜单的长选项
删除列表框、下拉框菜单的选项有两种方法:
1) 利用HTMLSelectElement对象的remove()方法删除选项
2) 直接将指定选项赋值为null
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(Owen.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 删除列表项 </title>
</head>
<body>
<input id="opValue" type="text"/>
<input id="add" type="button" value="增加"
onclick="add();"/>
<input id="del" type="button" value="删除"
onclick="del();"/><br />
<select id="show" size="8" style="width:120px;">
</select>
<script type="text/javascript">
var show = document.getElementById("show");
// 增加下拉列表选项的函数
var add = function()
{
// 以文本框的值创建一个<option.../>元素
var op = new Option(document
.getElementById('opValue').value);
//增加选项
show.options[show.options.length] = op;
}
var del = function()
{
// 如果有选项
if(show.options.length > 0)
{
// 删除最后的一个选项
show.remove(show.options.length - 1);
//也可为null
//show.options[show.options.length - 1] = null;
}
}
</script>
</body>
</html>
运行结果:
3. 删除表格的行或单元格
删除单元格的指定表格行使用HTMLTableElement对象的如下方法:
deleteRow(long index):删除表格中的index索引处的行
删除表格行的指定单元格使用HTMLRowElement对象的如下方法。
deleteCell(long index):删除某行index索引处的单元格
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(owen.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 删除表格的行和格 </title>
</head>
<body>
<input id="delrow" type="button" value="删除表格最后一行"
onclick="delrow();" /><br />
<input id="delcell" type="button" value="删除最后一行的最后一格"
onclick="delcell();" /><br />
<table id="test" border="1" style="width:400px;">
<caption>Java体系</caption>
<tr>
<td>Java</td>
<td>Java EE</td>
</tr>
<tr>
<td>Ajax</td>
<td>Java EE企业应用</td>
</tr>
<tr>
<td>XML</td>
<td>Android</td>
</tr>
</table>
<script type="text/javascript">
// 获取目标表格
var tab = document.getElementById("test");
// 删除行的函数
var delrow = function()
{
if (tab.rows.length > 0)
{
// 删除最后一行
tab.deleteRow(tab.rows.length - 1);
}
}
// 删除目标表格的最后一格
var delcell = function()
{
// 获取表格的所有行
var rowList = tab.rows;
// 获取表格的最后一行
var lastRow = rowList.item(rowList.length - 1);
if(lastRow.cells.length > 0)
{
// 删除表格的最后一格
lastRow.deleteCell(lastRow.cells.length - 1);
}
}
</script>
</body>
</html>
运行结果: