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 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
JavaScript 中的六种循环方法
Jan 06 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中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
yepnope.js 异步加载资源文件
2011/09/08 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python实现壁纸下载与轮换
2020/10/19 Python
python中的unittest框架实例详解
2021/02/05 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
办公室年终个人自我评价
2013/10/28 职场文书
外贸销售员求职的自我评价
2013/11/23 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
国博复兴之路观后感
2015/06/02 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
Java完整实现记事本代码
2022/06/16 Java/Android