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中的数字与字符串相加实例分析
Aug 14 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
jQuery实现计算器功能
Oct 19 jQuery
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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
Python利用命名空间解析XML文档
2020/08/10 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
成龙洗发水广告词
2014/03/14 职场文书
团队拓展活动方案
2014/08/28 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
名人传读书笔记
2015/06/26 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
详细介绍python操作RabbitMq
2022/04/12 Python