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 在网页中的运用(asp.net)
Nov 23 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
如何基于jQuery实现五角星评分
Sep 02 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制作静态网站的模板框架(一)
2006/10/09 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
JavaScript toFixed() 方法
2010/04/15 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
详解javascript replace高级用法
2019/02/17 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
Python字典操作简明总结
2015/04/13 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
简介Django中内置的一些中间件
2015/07/24 Python
SVM基本概念及Python实现代码
2017/12/27 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Linux下多个Python版本安装教程
2018/08/15 Python
Python 画出来六维图
2019/07/26 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
采购内勤岗位职责
2013/12/10 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
初婚未育证明
2014/01/15 职场文书
放飞理想演讲稿
2014/09/09 职场文书
给医院的感谢信
2015/01/21 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技