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 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
使用python开发vim插件及心得分享
2014/11/04 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
python使用插值法画出平滑曲线
2018/12/15 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
物理教学随笔感言
2014/02/22 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
Nginx源码编译安装过程记录
2021/11/17 Servers