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系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 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页面缓存方法小结
2015/01/10 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
IE和Firefox下event事件杂谈
2009/12/18 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
经理秘书找工作求职信
2013/12/19 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
化验员岗位职责
2015/02/14 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA