点击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. SQL查询优化

    在数据库SQL性能优化中,查询优化所占比较高.select调优基本还是比较耗时的.所以我整理了一些提示.每当我在写查询语句的时候,总会看看是否满足这些提示清单. 1.要为WHERE 和JOIN后面的字 ...

  2. rm: cannot remove `/home/cn0000/log/formlog.20140417': Read-only file system

    [root@localhost home]# su - cn0000 rm: cannot remove `/home/cn0000/log/monitor_xmllog.20140417': Rea ...

  3. 设计模式（十四）：Command命令模式 -- 行为型模式

    1.概述         在软件设计中,我们经常需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是哪个,我们只需在程序运行时指定具体的请求接收者即可,此时,可以使用命令模式来 ...

  4. 2014-08-13　SQL语句之Left Join

    今天是在吾索实习的第26天.这天在处理数据库数据的时候发现了一个不错的语句就是Left Join,即左连接.  其功能是:即使右表中没有匹配,也从左表返回所有的行.也就是说,显示的行数与左表一致,且当 ...

  5. Android软件的国际化

    软件的国际化指的就是:在不同语言的环境的操作系统下,显示不同的语言 2 其实实现软件的国际化很简单: 3 4 1.如果是对文字的国际化,只需要在res文件夹下面建立如下文件夹: 5 values-zh ...

  6. IMS 相关名词解释

    IMS: IMS(IP Multimedia Subsystem)是IP多媒体系统,是一种全新的多媒体业务形式,它能够满足现在的终端客户更新颖.更多样化多媒体业务的需求. RCS:Rich Commu ...

  7. C#_Test

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Plus ...

  8. 关于使用百度ueditor时的一些问题

    本来这些问题直接在百度贴吧里回答不就完事了,可是好死不死的,百度贴吧里老出现 未知错误,错误号:230274 看来还是算了,自己做一个随笔记录一下好了 关于我们获取里面的内容时,老是会有一个<p ...

  9. Android下如何理解onMeasure，onLayout的过程

    在Android中view如何完成绘制这个过程介绍了很多,但是很多理论化的东西,最近重新整理一下,通俗的讲解一下. View绘制过程就好比你向银行贷款, 在执行onMeasure的时候,好比银行告诉你 ...

  10. 解决sql2008连接数据库，无法为该请求检索数据，错误916

    通常在使用sql server management studio 2008 连接数据库,可以链接上,但是无法查看自己的数据库,点击数据库或刷新数据库列表后,提示:无法为该请求检索数据,错误916,如 ...