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折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
基于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生成随机密码的几种方法
2011/01/17 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
JSONP 跨域共享信息
2012/08/16 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
JS的数组迭代方法
2015/02/05 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
vue-router源码之history类的浅析
2019/05/21 Javascript
vue实现评论列表功能
2019/10/25 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python常见的pandas用法demo示例
2019/03/16 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
如何在django中运行scrapy框架
2020/04/22 Python
Html5页面二次分享的实现
2018/07/30 HTML / CSS
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
《鸟的天堂》教学反思
2014/02/27 职场文书
四群教育工作实施方案
2014/03/26 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
农村婚庆主持词
2015/06/29 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers