<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>每天一个JavaScript实例-从一个div元素删除一个段落</title>

<style>

	p{

		padding:20px;

		margin:10px 0;

		width:400px;

		background-color:#eef;

	}

</style>

<script>

window.onload = function(){

	var paras = document.getElementsByTagName("p");

	for(var i=0;i<paras.length;i++){

		paras[i].onclick = prun;

	}

}

function prun(){

	var parent = this.parentNode;

	console.log(parent);

	parent.removeChild(this);

	alert("paras" + document.getElementsByTagName("p").length);

}

</script>

</head>

<body>

<div id = "date">

<p>one</p>

<p>two</p>

<p>three</p>

<p>four</p>

<p>five</p>

</div>

</body>

</html>

每天一个JavaScript实例-从一个div元素删除一个段落的更多相关文章

  1. 每天一个JavaScript实例-获取元素当前高度

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 每天一个JavaScript实例-操作元素定位元素

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 每天一个JavaScript实例-递归实现反转数组字符串

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 每天一个JavaScript实例-防止反复表单提交

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 每天一个JavaScript实例-处理textarea中的字符成每一行

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. PLSQL性能优化技巧

    1.理解执行计划1-1.什么是执行计划 oracle数据库在执行sql语句时,oracle的优化器会根据一定的规则确定sql语句的执行路径,以确保sql语句能以最优性能执行.在oracle数据库系统中 ...

  2. wamp安装注意点！

    安装wamp前或者重装系统后,默认没有依赖的组件VC11,需要先安装才能运行 下载地址:http://www.microsoft.com/en-us/download/details.aspx?id= ...

  3. webapp框架—学习AngularUI2（demo改造）

    目的:把AngularUI的模板应用到“桂电在线”上 步骤如下: 按功能表修改demo界面 学习angularUI如何加载全部页面,为了设置自定义加载模板,在demo/demo.js中找到这一段 // ...

  4. LVS原理详解及部署之二：LVS原理详解（3种工作方式8种调度算法）

    一.集群简介 什么是集群 计算机集群简称集群是一种计算机系统,它通过一组松散集成的计算机软件和/或硬件连接起来高度紧密地协作完成计算工作.在某种意义上,他们可以被看作是一 台计算机.集群系统中的单个计 ...

  5. mysql的数据类型int、bigint、smallint 和 tinyint取值范围 及varchar

    使用整数数据的精确数字数据类型.   bigint   从 -2^63 (-9223372036854775808) 到 2^63-1 (9223372036854775807) 的整型数据(所有数字 ...

  6. PHPCMS实现文章置顶功能的方法

    我个人喜欢把PHPCMS当作博客来用,而作为一个博客,怎能少了文章置顶功能呢?其中用PHPCMS实现置顶功能非常简单,无非是修改下推荐位的名称为置顶,然后在文章列表中推送需要置顶的文章罢了. 不过博客 ...

  7. thinkphp路径引用问题

    查看ThinkPHP\Library\Behavior\ContentReplaceBehavior.class文件,常量定义如下定义: '__ROOT__'      =>  __ROOT__ ...

  8. bzoj 2331: [SCOI2011]地板 插头DP

    2331: [SCOI2011]地板 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 541  Solved: 239[Submit][Status] D ...

  9. hadoop-2.0.0-cdh4.2.1源码编译总结

    经过一个星期多的努力,这两个包的编译工作总算告一段落. 首先看一下这一篇文章: 在eclipse下编译hadoop2.0源码 http://www.cnblogs.com/meibenjin/arch ...

  10. not in改写关联无需考虑重复数据

    SQL> select * from a1; ID NAME ---------- ---------- 1 a 1 a 2 a 3 a SQL> select * from a2; ID ...