javascript删除一个html元素节点的方法

 更新时间:2014年12月20日 10:46:07   投稿:shichen2014  
这篇文章主要介绍了javascript删除一个html元素节点的方法,可通过获取父节点再查找并删除子节点来实现该功能,具有一定的参考借鉴价值,需要的朋友可以参考下

本文实例讲述了利用原生javascript实现删除一个指定的html元素的方法。分享给大家供大家参考。具体实现方法如下:

复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>脚本之家</title>
<style>
#content{
  width:200px;
  height:20px;
  color:red;
}
</style>
<script>
window.onload=function(){
  var obt=document.getElementById("bt");
  var odiv=document.getElementById("content");
  obt.onclick=function(){
    odiv.parentNode.removeChild(odiv);
  }
}
</script>
</head>
<body>
<div id="content">脚本之家</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

在原生的javascript中,暂时没有没有一个方法能够删除元素本身,如果要删除可以通过通过父节点的removeChild()方法删除指定的子元素,代码比较简单,这里不多介绍了,感兴趣的朋友可以参阅相关资料。

希望本文所述对大家基于javascript的web程序设计有所帮助。

相关文章

  • JavaScript递归操作树形结构代码示例

    JavaScript递归操作树形结构代码示例

    前端树形结构一般用于网页的地理位置输入框,地理位置级联选择,人员的部门选择等,这篇文章主要给大家介绍了关于JavaScript递归操作树形结构的相关资料,需要的朋友可以参考下
    2024-01-01
  • JavaScript实现简单计时器

    JavaScript实现简单计时器

    这篇文章主要为大家详细介绍了JavaScript实现简单计时器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • echarts实现3d柱状图的2种方式举例

    echarts实现3d柱状图的2种方式举例

    echarts3D效果柱状图的实现,这个太难了,我花了两天终于调成我想要的效果啦,要是官网上有例子就好了,太难调了,下面这篇文章主要给大家介绍了关于echarts实现3d柱状图的2种方式,需要的朋友可以参考下
    2023-02-02
  • Js 去掉字符串中的空格(实现代码)

    Js 去掉字符串中的空格(实现代码)

    这篇文章主要介绍了在Js中去掉字符串中空格的实现方法。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JS实现table表格固定表头且表头随横向滚动而滚动

    JS实现table表格固定表头且表头随横向滚动而滚动

    这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,需要的朋友可以参考下
    2017-10-10
  • javascript文本模板用法实例

    javascript文本模板用法实例

    这篇文章主要介绍了javascript文本模板用法,实例分析了文本模板的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JS中的XMLHttpRequest 对象示例详解

    JS中的XMLHttpRequest 对象示例详解

    xmlhttp是一种浏览器对象, 可用于模拟http的GET和POST请求,xmlhttp配合JavaScript可以实现页面数据在无刷新下的定时数据更新,如果应用在聊天室、文字直播上,可以取得较好的视觉效果,这篇文章主要介绍了JS——XMLHttpRequest 对象,需要的朋友可以参考下
    2024-01-01
  • js的继承方法小结(prototype、call、apply)(推荐)

    js的继承方法小结(prototype、call、apply)(推荐)

    这篇文章主要介绍了js的继承方法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 小程序异步问题之多个网络请求依次执行并依次收集请求结果

    小程序异步问题之多个网络请求依次执行并依次收集请求结果

    这篇文章主要介绍了小程序异步问题之多个网络请求依次执行并依次收集请求结果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Javascript this 的一些学习总结

    Javascript this 的一些学习总结

    相信有C++、C#或Java等编程经验的各位,对于this关键字再熟悉不过了。由于Javascript是一种面向对象的编程语言,它和C++、C#或Java一样都包含this关键字,接下来我们将向大家介绍Javascript中的this关键字
    2012-08-08

最新评论