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 相关文章推荐
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
安装vue-cli的简易过程
May 22 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 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代码的53条建议
2008/03/27 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
Python查找相似单词的方法
2015/03/05 Python
python 排序算法总结及实例详解
2016/09/28 Python
基于python log取对数详解
2018/06/08 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python