删除HTML元素
删除HTML元素也是通过删除节点来完成的。对于普通的HTML元素，可用通用方法来删除节点，而列表框、下拉菜单、表格则有额外的方法来删除HTML元素。
删除节点
删除节点通常借助于其父节点，Node对象提供了如下方法来删除子节点。
➢ removeChild(oldNode)：删除oldNode子节点。
在从父节点中删除该子节点后，该子节点代表的内容也会消失。下面的代码通过控制HTML增加、删除节点来使页面中的表格出现、隐藏。
例子
<!DOCTYPE html>
<html>
<head>
<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>
删除列表框和下拉菜单的选项
删除列表框、下拉菜单的选项有两种方法：
➢ 利用HTMLSelectElement对象的remove()方法删除选项。
➢ 直接将指定选项赋为null即可。
对于HTMLSelectElement对象而言，它提供了如下方法用于删除选项。
➢ remove(long index)：删除指定索引处的选项。
上面方法中的index是需要删除选项所在的索引值。如果该索引值比下拉列表中选项的最大索引值还大，或者索引值小于0，则该方法不会删除任何选项。下面的页面演示了动态增加下拉列表的选项，并可以删除下拉列表的选项。
例子
<!DOCTYPE html>
<html>
<head>
<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);
}
}
</script>
</body>
</html>
提示
如果想删除某个列表框、下拉菜单的全部选项，没有必要采用循环的方式逐一删除每个选项，将列表框或下拉菜单的innerHTML属性赋为null，即可一次性删除该列表框、下拉菜单的全部选项。
删除表格的行或单元格
删除表格的指定表格行使用HTMLTableElement对象的如下方法。
➢ deleteRow(long index)：删除表格中index索引处的行。
删除表格行的指定单元格使用HTMLRowElement对象的如下方法。
➢ deleteCell(long index)：删除某行index索引处的单格。
例子
<!DOCTYPE html>
<html>
<head>
<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>
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。