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类的定义
Jun 28 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
微信小程序实现留言板(Storage)
Nov 02 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
基于js实现抽红包并分配代码实例
Sep 19 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 选项及相关信息函数库
2006/12/04 PHP
php中目录,文件操作详谈
2007/03/19 PHP
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
python async with和async for的使用
2019/06/20 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
python 实现图片批量压缩的示例
2020/12/18 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
项目资料员岗位职责
2013/12/10 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
成本会计岗位职责
2015/02/03 职场文书
出生证明范本
2015/06/15 职场文书
小学生读书笔记范文
2015/06/30 职场文书
python基础之停用词过滤详解
2021/04/21 Python
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js