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


Posted in Javascript onDecember 20, 2014

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<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 写类方式之六
Jul 05 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
Node.js中调用mysql存储过程示例
Dec 20 #Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 #Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 #Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 #Javascript
js中匿名函数的创建与调用方法分析
Dec 19 #Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 #Javascript
浅谈Javascript如何实现匀速运动
Dec 19 #Javascript
You might like
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
APMServ使用说明
2006/10/23 PHP
PHP分页显示制作详细讲解
2006/12/05 PHP
一些常用的php函数
2006/12/06 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Python Lambda函数使用总结详解
2019/12/11 Python
Python调用Windows命令打印文件
2020/02/07 Python
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
婚前财产公证书
2014/04/10 职场文书
业务员自荐信范文
2014/04/20 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
感谢信
2019/04/11 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
Win2008系统搭建DHCP服务器
2022/06/25 Servers