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 调试器简介
Feb 21 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
基于JavaScript实现省市联动效果
Jun 22 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
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
深入apache host的配置详解
2013/06/09 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
Div Select挡住的解决办法
2008/08/07 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
JS的数组迭代方法
2015/02/05 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
python函数的5种参数详解
2017/02/24 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
个性大学生自我评价
2013/12/04 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
成绩单公证书
2014/04/10 职场文书
分公司任命书
2014/06/06 职场文书
高校教师个人总结
2015/02/10 职场文书
人力资源部岗位职责
2015/02/11 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python