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

作者:拾光

时间:2026-10-28

浏览:176

本文介绍如何使用原生JavaScript实现删除指定子元素的功能。通过获取父元素和子元素集合,利用removeChild方法移除指定索引的子节点,并配合按钮点击事件触发删除操作,无需依赖jQuery即可实现。

文章目录

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)的子元素。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章