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 相关文章推荐
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
js实现表格筛选功能
Jan 18 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
Ajax实现异步加载数据
Nov 17 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中MD5函数使用实例代码
2008/06/07 PHP
php smarty函数扩展
2010/03/15 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
python实现二叉查找树实例代码
2018/02/08 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
Flask之flask-script模块使用
2018/07/26 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
如何在pycharm中安装第三方包
2020/10/27 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
本科生职业生涯规划书范文
2014/01/21 职场文书
挂职自我鉴定
2014/02/26 职场文书
安踏广告词改编版
2014/03/21 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
2019银行竞聘书
2019/06/21 职场文书
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android