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 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
npm ci命令的基本使用方法
Sep 20 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通用检测函数集合
2011/02/08 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
载入进度条 效果
2006/07/08 Javascript
UserData用法总结 lanyu出品
2010/07/01 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
js实现自定义路由
2017/02/04 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
Python线程之定位与销毁的实现
2019/02/17 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
对Django url的几种使用方式详解
2019/08/06 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
解决Django no such table: django_session的问题
2020/04/07 Python
Python如何安装第三方模块
2020/05/28 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
python中random模块详解
2021/03/01 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
职专应届生求职信
2013/11/16 职场文书
中华魂演讲稿
2014/05/13 职场文书
六一儿童节活动总结
2014/08/27 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
Python自动化实战之接口请求的实现
2022/05/30 Python