JavaScript原生删除指定子元素代码实例

JavaScript原生删除指定子元素代码实例

原生JavaScript删除指定子元素的代码示例如下：

本节主要讲解如何利用原生JavaScript实现删除指定子元素的功能。虽然使用jQuery库来实现这一功能通常更为便捷，但使用原生JavaScript操作DOM也并不复杂，下文将对此进行具体介绍。关于jQuery实现该功能的具体方法，可参考“jquery删除指定子元素代码实例”相关章节。

代码示例如下：

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<title>本站</title>
<style>
ul li{
width:400px;
height:30px;
line-height:30px;
list-style:none;
}
</style>
<script>
window.onload=function(){
var obt=document.getElementById("bt");
var obox=document.getElementById("box");
var lis=obox.getElementsByTagName("li");
obt.onclick=function(){
obox.removeChild(lis[1]);
  }
}
</script>
</head>
<body>
<ul id="box">
<li>本站欢迎您，只有努力奋斗才会有美好的明天。</li>
<li>没有任何人一开始就是高手，必须要努力奋斗才行。</li>
<li>每一天都是新的，要好好的珍惜时间。</li>
</ul>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上述代码已成功实现预期功能，接下来对实现过程进行详细说明。

代码注释说明：

1. window.onload=function(){}：确保文档内容完全加载完毕后再执行函数内的代码。 2. var obt=document.getElementById("bt")：获取id为"bt"的按钮元素对象。 3. var obox=document.getElementById("box")：获取id属性值为"box"的元素对象。 4. var lis=obox.getElementsByTagName("li")：获取id为"box"的元素下所有li子元素的集合。 5. obt.onclick=function(){}：为按钮注册click点击事件的处理函数。 6. obox.removeChild(lis[1])：通过父元素调用removeChild方法，删除指定索引（此处为索引1）的子元素。