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中的16进制字符(改进)
Nov 21 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
vue组件开发之slider组件使用详解
Aug 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
读jQuery之六 缓存数据功能介绍
Jun 21 #Javascript
You might like
跟我学Laravel之快速入门
2014/10/15 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
JS中操作JSON总结
2020/12/06 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
Python 3.x 新特性及10大变化
2015/06/12 Python
python斐波那契数列的计算方法
2018/09/27 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
Python hashlib模块实例使用详解
2019/12/24 Python
蒂娜商店:Tiina the Store
2019/12/07 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
联谊活动策划书
2014/01/26 职场文书
销售业务员岗位职责
2014/01/29 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
法人授权委托书范本
2014/09/17 职场文书
医者仁心观后感
2015/06/17 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
浅谈Vue的computed计算属性
2022/03/21 Vue.js