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各种复制代码收集
Sep 20 Javascript
js 图片等比例缩放代码
May 13 Javascript
js正则表达式的使用详解
Jul 09 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 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检查日期函数checkdate用法实例
2015/03/19 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
PHP 裁剪图片
2021/03/09 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Python简单日志处理类分享
2015/02/14 Python
说一说Python logging
2016/04/15 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
教师实习自我鉴定
2013/12/13 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
销售人员工作自我评价
2014/09/21 职场文书
单位员工收入证明样本
2014/10/09 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
导师鉴定意见
2015/06/05 职场文书
python内置进制转换函数的操作
2021/06/02 Python
Python 中的Sympy详细使用
2021/08/07 Python
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers