append与remove的简单使用
点击Add More按钮页面会自动添加一个输入框和Remove按钮,点击Remove按钮则此行元素将被移除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
fieldset{width:400px; border-radius:10px;}
ul{padding: 2px;list-style:none;}
label{float:left;width:100px}
</style>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#add').click(function(){
var str='<li>';
str+='<label>Name</label><input type="text" value=""/>';
str+='<input type="button" value="Remove" class="remove"/></li>';
$('#sites').append(str);
});
$('.remove').live('click',function(){
$(this).parent('li').remove();
});
});
</script>
</head>
<body>
<form>
<fieldset>
<legend>Websites you visit daily</legend>
<ul id="sites">
<li><label>Name</label><input type="text" value=""/></li>
</ul>
<input type="button" id="add" value="Add More"/>
</fieldset>
</form>
</body>
</html>
append与remove的简单使用的更多相关文章
- jquery 清空动态append添加元素,remove方法
<html> <head> <script type="text/javascript" src="jquery-1.9.1.js" ...
- jQuery—一些常见方法(2)DOM操作【insertBefore(),insertAfter(),appendTo(),prependTo(),before(),after(),append(),prepend(),remove(),on(),off(),scrollTop()】
一.insertBefore() 如下代码:找到span标签,将span标签剪切到div的前面 <!DOCTYPE html> <html lang="en"&g ...
- Python可迭代对象中的添加和删除(add,append,pop,remove,insert)
list: classmates = ['Michael', 'Bob', 'Tracy'] classmates.append('Adam') //添加在末尾,没有add()方法 classmate ...
- Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理10
今天把用户的菜单显示和页面的按钮显示都做好了,下面先来个效果图 接下来说下我实现的方法: 首先我在每个方法前面都加了这个属性, /// <summary> /// 表示当前Action请求 ...
- jQuery系列 第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
- ASP.NET开发常用简单实用的方法
ASP.NET开发简单实用的方法 一.打印和导出 打印和导出EXCEL在目前ASP.NET开发中可以说是必要的,有时候针对不同数据难易程度下,用有效快速的方法是解决办法的有效途径之一. 1.打印 后台 ...
- iOS实现白板、画板功能,有趣的涂鸦工具,已封装,简单快捷使用
一.效果图: 二.选择颜色: 分[固定颜色模式]和[自由取模式]. 三.操作栏功能: 1.撤销:撤销上一步操作,可一直往上进行,直到全部清空. 2.清空:直接清除所有绘画. 3.橡皮擦:去除不要的绘 ...
- 比较jquery中的after(),append(),appendTo()方法
html页面: <p id="myp1">我的兴趣爱好是:</p> <button id="b1">after函数</ ...
- 简单看看jdk7源码之java.lang包01
从今天开始简单开始读一遍jdk的源码,估计这个时间会很长,慢慢啃吧....(首先说一句抱歉,因为很多图都是直接百度扣的,图太多了不能为每一个图附上原版链接,不好意思!) 在网上看了很多的教程,读源码有 ...
随机推荐
- 【HDOJ】1104 Remainder
bfs. #include <cstdio> #include <cstring> #include <cstdlib> #include <queue> ...
- office web apps server 问题和解决办法
New-OfficeWebAppsFarm –InternalURL "http://owa.zjkhlib.com" –AllowHttp –EditingEnabled 错误1 ...
- zookeeper[2] zookeeper原理(转)
转自:http://cailin.iteye.com/blog/2014486 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,它包含一个简单的原语集,分布式应用程序可以基于它实现 ...
- lesson1:threadlocal的使用demo及源码分析
本文中所使用的demo源码地址:https://github.com/mantuliu/javaAdvance 其中的类Lesson1ThreadLocal 本文为java晋级系列的第一讲,后续会陆续 ...
- form表单提交之前推断
1.使用onsubmit方法 <form name="Form" action="t" method="post" onsubmit= ...
- MySQL数据库的环境及简单操作
***********************************************声明*************************************************** ...
- arcpagelistarclist列表分页
arcpagelistarclist列表分页 (DedeCMS 5.6) 名称:arcpagelist 功能:通过制定arclist的pagesize及tagid属性,配合arcpagelist标签进 ...
- Gcc简介与常用命令
一.对于GUN编译器来说,程序的编译要经历预处理.编译.汇编.连接四个阶段,如下图所示: 在预处理阶段,输入的是C语言的源文件,通常为*.c.它们通常带有.h之类头文件的包含文件.这个阶段主要处理源文 ...
- 关于Lambda表达式的理解
在.NET 1.0的时候,大家都知道我们经常用到的是委托.有了委托呢,我们就可以像传递变量一样的传递方法.在一定程序上来讲,委托是一种强类型的托管的方法指 针,曾经也一时被我们用的那叫一个广泛呀,但是 ...
- Js 插件修改及优化总结
1. ajaxfileupload 上传插件版本问题以及数据处理问题 参考链接: http://liwx2000.iteye.com/blog/1540321 现在大家至少也在用jquery1.9以上 ...