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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
Javascript之Date对象详解
Jun 07 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
小程序实现列表展开收起效果
Jul 29 Javascript
Javascript实现打鼓效果
Jan 29 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 文件系统详解
2012/09/13 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
python编写Logistic逻辑回归
2020/12/30 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
竞选班干部的演讲稿
2014/04/24 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
2014年妇联工作总结
2014/11/21 职场文书
七年级作文之英语老师
2019/10/28 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android