jQuery动态添加、删除元素的方法


Posted in Javascript onJanuary 09, 2014
<script> 
$.schoolFn = { 
addItem: function(obj){ 
$("#itemList").append("<li id='liItrm' class='list-group-item clearfix'><span class='glyphicon glyphicon-resize-vertical sort-handle'></span>"+obj+"<input type='hidden' name='audiences' value='"+obj+"'><button type='button' class='close delete-btn deleteItem' onclick='deleteItem(this);' title='删除'>×</button></li>"); 
}, removeItem: function(obj){ 
$("#"+obj).replaceWith(""); 
} 
} 
$("#itemAdd").click(function(){ 
var item=$('#teacherInput').val(); 
$.schoolFn.addItem(item); 
$('#teacherInput').val(""); 
}); 
function deleteItem(obj){ 
var item=$(obj).parents(".list-group-item").attr("id"); 
$.schoolFn.removeItem(item); 
} 
</script>
Javascript 相关文章推荐
JS实现self的resend
Jul 22 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 #Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 #Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 #Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 #Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 #Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 #Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 #Javascript
You might like
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
location.href用法总结(最主要的)
2013/12/27 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python正则表达式re模块详细介绍
2014/05/29 Python
Python语言的12个基础知识点小结
2014/07/10 Python
Python正则表达式完全指南
2017/05/25 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
python列表推导式入门学习解析
2019/12/02 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
物流管理应届生求职信
2013/11/07 职场文书
结婚周年感言
2014/02/24 职场文书
骨干教师考核方案
2014/05/09 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
租房协议书范例
2014/10/14 职场文书
2014年教务处工作总结
2014/12/03 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript