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 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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 魔术方法使用说明
2009/10/20 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python实现的弹球小游戏示例
2017/08/01 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
python自动化之Ansible的安装教程
2019/06/13 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
python将数组n等分的实例
2019/12/02 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
美丽家庭事迹材料
2014/05/03 职场文书
团日活动总结书
2014/05/08 职场文书
校园广播稿100字
2014/10/06 职场文书
2014年行政部工作总结
2014/11/19 职场文书
图书馆义工感想
2015/08/07 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
Python使用openpyxl批量处理数据
2021/06/23 Python
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP