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对象模型-执行模型
Apr 28 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
原生js编写焦点图效果
Dec 08 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
jQuery实现查看图片功能
Dec 01 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
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
500行python代码实现飞机大战
2020/04/24 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
七年级英语教学反思
2014/01/15 职场文书
学校重阳节活动总结
2015/03/24 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript