JavaScript如何删除HTML元素-木庄网络博客

本文摘自PHP中文网，作者coldplay.xixi，侵删。

JavaScript删除HTML元素的方法：1、删除节点，代码为【removeChild（oldNode）】；2、删除列表框下拉菜单的选项，代码为【remove（long index）】。

本教程操作环境：windows7系统、javascript1.8.5版，DELL G3电脑。

JavaScript删除HTML元素的方法：

1、删除节点

removeChild（oldNode）：删除 oldChild 子节点

<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>
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>

结果

2、删除列表框下拉菜单的选项

remove（long index）：删除指定索引处的选项

<body id="test">
<input id="opValue" type="text" />
<input id="add" type="button" value="增加"  onclick="add();"/>
<input id="del" type="button" value="删除"  onclick="del();"/>
<select id="show" size="8" style="width:180px"></select>
<script>
var show = document.getElementById("show");
var add = function(){
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>