zoukankan
html css js c++ java
dom 的添加或事件绑定
dom 的添加或事件绑定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>test-del</title> <style> p{ 400px; margin:0 auto; } ins{ cursor:pointer; text-decoration:none; padding-left:20px; } </style> </head> <body> <div> <div id="list"> <p><span>1</span> <ins>delete</ins> </p> <p><span>2</span> <ins>delete</ins> </p> <p><span>3</span> <ins>delete</ins> </p> <p><span>4</span> <ins>delete</ins> </p> <p><span>5</span> <ins>delete</ins> </p> <p><span>6</span> <ins>delete</ins> </p> </div> </div> <p><a id="add" href="javascript:void(0);">Add</a></p> </body> </html> <script type="text/javascript"> // get elem function id(){ return document.getElementById(arguments[0]); } (function(){ var add = id('add'), list = id('list'), p = list.getElementsByTagName('p'), pLen = p.length, newLen = 0, newP = null, span; add.onclick = function(){ newLen = list.getElementsByTagName('p').length + 1; span = '<span>' + newLen + '</span><ins>delete</ins>'; newP = document.createElement('p'); newP.innerHTML = span; newP.onclick = function(e){ del(this, e); } list.appendChild(newP); } // del function del(node, e){ e = e || window.event; var target = e.target || e.currentTarget, span = list.getElementsByTagName('span'); if(target.tagName.toLowerCase() == 'ins'){ node.parentNode.removeChild(node); // reset span number for(var i = 0; i < list.getElementsByTagName('p').length; i++){ span[i].innerHTML = i + 1; } } } // old del for(var i = 0; i < pLen; i++){ p[i].onclick = function(e){ del(this, e); } } }()); </script>
运行代码
查看全文
相关阅读:
ReentrantReadWriteLock源码探究
ReentrantLock源码探究
CyclicBarrier源码探究 (JDK 1.8)
ThreadLocal源码探究 (JDK 1.8)
CountDownLatch源码探究 (JDK 1.8)
ConcurrentHashMap源码探究 (JDK 1.8)
备忘录模式
variable precision SWAR算法
建造者模式
Spring MVC 解决乱码
原文地址:https://www.cnblogs.com/jikey/p/2950900.html
最新文章
【Java并发】- 6.对并发工具类CyclicBarrier的源码解析
【Java并发】- 5.对并发工具类CountDownLatch的源码解析
【Java并发】- 3.对Volatile关键字的深入解析
【Java并发】- 4.对Lock接口及其关联接口Condition的解析
【Java并发】- 2.对Synchronized关键字的深入解析
【Java并发】- 1.对Object类中wait和notify方法的解析
【RestFul接口文档】- 关于Swagger接口文档的使用说明
【计算机网络笔记】- 4.网络层概述
【计算机网络笔记】- 3.数字链路层概述
【计算机网络笔记】- 2.物理层概述
热门文章
设计模式-单例模式code
JDK性能分析与故障处理-命令行
JDK性能分析工具-引用于深入理解JVM
JVM学习分享-思考题
JVM学习分享-练习题
JVM运行时数据区-详细结构图
Class文件结构-练习题1
Class文件结构-属性表
Class文件结构-常量池
线程池源码探究
Copyright © 2011-2022 走看看