jquery随意添加移除html的实现代码


Posted in Javascript onJune 21, 2011

html代码:

<ul id="list3" class="eventlist"> 
<li>plain</li> 
<li class="special">special <button>I am special</button></li> 
<li>plain</li> 
</ul>

script代码:
function addRemoveItemNS() { 
var $newLi = $('<li class="special">special and new <button class="addone">I am new</button> <button class="removeme">remove me</button></li>'); 
$('#list3 li.special') 
.find('button.addone') 
.unbind('click.addit') 
.bind('click.addit', function() { 
$(this).parent().after($newLi); 
addRemoveItemNS(); 
}) 
.end() 
.find('button.removeme') 
.unbind('click.removeit') 
.bind('click.removeit', function() { 
$(this).parent().remove(); 
}); 
} 
$(document).ready(function() { 
addRemoveItemNS(); 
});

可以随意添加移除html代码。
Javascript 相关文章推荐
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 #Javascript
基于jquery实现的表格分页实现代码
Jun 21 #Javascript
jquery异步请求实例代码
Jun 21 #Javascript
读jQuery之九 一些瑕疵说明
Jun 21 #Javascript
读jQuery之八 包装事件对象
Jun 21 #Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 #Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 #Javascript
You might like
php自定义函数之递归删除文件及目录
2010/08/08 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
公积金转移接收函
2014/01/11 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
党员承诺践诺书
2014/05/20 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
2014年采购员工作总结
2014/11/18 职场文书
通知函格式范文
2015/04/27 职场文书
项目投资意向书范本
2015/05/09 职场文书
起诉状范本
2015/05/20 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书