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 相关文章推荐
JavaScript 数组循环引起的思考
Jan 01 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 Javascript
关于Vue Router的10条高级技巧总结
May 06 Vue.js
js之ajax文件上传
May 13 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
python list转dict示例分享
2014/01/28 Python
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python contextlib模块使用示例
2015/02/18 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
给我一面国旗 python帮你实现
2019/09/30 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
介绍一下gcc特性
2015/10/31 面试题
先进党支部事迹材料
2014/01/13 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
简历自我评价模版
2014/01/31 职场文书
总经理工作职责范文
2014/03/14 职场文书
对照检查剖析材料
2014/09/30 职场文书
教师学期末个人总结
2015/02/13 职场文书
爱护公物主题班会
2015/08/17 职场文书