点击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的简单使用的更多相关文章

  1. jquery 清空动态append添加元素,remove方法

    <html> <head> <script type="text/javascript" src="jquery-1.9.1.js" ...

  2. 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 ...

  3. Python可迭代对象中的添加和删除（add，append,pop,remove,insert）

    list: classmates = ['Michael', 'Bob', 'Tracy'] classmates.append('Adam') //添加在末尾,没有add()方法 classmate ...

  4. Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理10

    今天把用户的菜单显示和页面的按钮显示都做好了,下面先来个效果图 接下来说下我实现的方法: 首先我在每个方法前面都加了这个属性, /// <summary> /// 表示当前Action请求 ...

  5. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  6. ASP.NET开发常用简单实用的方法

    ASP.NET开发简单实用的方法 一.打印和导出 打印和导出EXCEL在目前ASP.NET开发中可以说是必要的,有时候针对不同数据难易程度下,用有效快速的方法是解决办法的有效途径之一. 1.打印 后台 ...

  7. iOS实现白板、画板功能，有趣的涂鸦工具，已封装，简单快捷使用

    一.效果图: 二.选择颜色: 分[固定颜色模式]和[自由取模式].  三.操作栏功能: 1.撤销:撤销上一步操作,可一直往上进行,直到全部清空. 2.清空:直接清除所有绘画. 3.橡皮擦:去除不要的绘 ...

  8. 比较jquery中的after(),append(),appendTo()方法

    html页面: <p id="myp1">我的兴趣爱好是:</p> <button id="b1">after函数</ ...

  9. 简单看看jdk7源码之java.lang包01

    从今天开始简单开始读一遍jdk的源码,估计这个时间会很长,慢慢啃吧....(首先说一句抱歉,因为很多图都是直接百度扣的,图太多了不能为每一个图附上原版链接,不好意思!) 在网上看了很多的教程,读源码有 ...

随机推荐

  1. vsftpd,tftp安装配置

    一. 对比共同点:都包含ftp不同点:1)vsftpd是一款在Linux发行版中最受推崇的FTP服务器程序.你可以通过ftp客户端上传下载软件.可设置访问用户名密码,或匿名anonymous登陆.默认 ...

  2. 【转】ActionBar的基本用法

    原文网址:http://irtutsk.iteye.com/blog/2117707 ActionBar的组成: [1]AppIcon:标题区,显示应用程序图标和标题,也可以自定义. [2]ViewC ...

  3. sql Sever 修改表中的列名

    EXEC SP_RENAME 'LeInterface.iYear','iLeYear','COLUMN' EXEC SP_RENAME 'LeInterface.imonth','iLemonth' ...

  4. 什么是Ajax? （转载于疯狂客的BLOG）

    Ajax的定义 Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术. Ajax包括: XHTML和CSS,使用文档对象模型(Document Obje ...

  5. uva 10714 Ants(贪心）

    题目连接:10714 - Ants 题目大意:一根棍子上有n只蚂蚁, 这些蚂蚁开始可以任意朝着一个方向移动一直走,向左或是向右,并且移动速度是相同的,但是一旦蚂蚁碰到迎面走来的另一只蚂蚁,那么这两只蚂 ...

  6. socket编程2

    package tcp; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOExceptio ...

  7. jQuery效果---隐藏与显示

    隐藏与显示 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. 浅析NSTimer & CADisplayLink内存泄露

    偶得前言 NSRunLoop与定时器 - invalidate的作用 我们如何解决? 偶得前言 本篇文章中我们主要谈谈NSTimer\CADisplayLink在使用过程中牵扯到内存泄露的相关问题及解 ...

  9. 有利于SEO的DIV+CSS规范小结

    一.CSS文件及样式命名 1.CSS文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: ...

  10. SAN和NAS的区别

    SAN : STORAGE AREA NETWORK   存储区域网络 NAS : NETWORK ATTACHED STORAGE 网络附加存储 NAS不一定是盘阵,一台普通的主机就可以做出NAS, ...