删除HTML元素也是通过删除节点来完成的。对于普通的HTML元素,可通过方法来删除节点,而列表框,下拉菜单,表格则亚欧额外的方法来删除HTML元素。
删除节点通常借助于父节点,Node对象提供了如下方法来删除子节点。
- removeChild(oldNode):删除oldNode子节点。
在父节点中删除该节点后,该子节点代表的内容也会消失。下面的代码通过控制HTML增加、刪除节点来使页面中的表格出现,隐藏。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html"/>
<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>