点击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. 【转】在Ubuntu 12.04 上为Virtualbox 启用USB 设备支持--不错

    原文网址:http://www.cnblogs.com/ericsun/archive/2013/06/10/3130679.html 虚拟机我一直在用,不是说离不开Windows,而是有些时候一些应 ...

  2. HDU_2036——多边形面积,行列式计算

    Problem Description “ 改革春风吹满地, 不会AC没关系; 实在不行回老家, 还有一亩三分地. 谢谢!(乐队奏乐)”话说部分学生心态极好,每天就知道游戏,这次考试如此简单的题目,也 ...

  3. Bogo排序

    我不知道这个能不能算排序...维基上有这个排序名称...但我感觉它纯碎在卖萌... 基本思路:随机打乱数组,然后看看数组有序了没,如果没?继续随机打乱继续看...直至有序. 神一般的低效.排几十个数不 ...

  4. mybatis dao无实现类的配置

    spring的配置文件 添加: <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">     ...

  5. 让iframe调用页面的背景透明

    需求:在一个div里面嵌套一个iframe(src="ui.html"),div有背景图片,要让iframe里的内容透明地显示在div层上. 刚开始直接把iframe放在div中, ...

  6. SpringMVC文件上传与下载

    一.关键步骤 ①引入核心JAR文件 SpringMVC实现文件上传,需要再添加两个jar包.一个是文件上传的jar包,一个是其所依赖的IO包.这两个jar包,均在Spring支持库的org.apach ...

  7. js中的数据类型及其转换

    Js中的数据类型 Js中的数据类型一共有六种,即number,string,boolean,underfine,null,object. 一,number Number数据类型指的是数字,可以为整型, ...

  8. StoryBoard 页面传值

    如图新建一个viewController和DetailViewController VC 和DetailVC 联线的Idetnifier 设置为:GoDetailVC ViewController主要 ...

  9. SEO学习之路

    一.入门建站篇 1.Wamp集成环境安装 2.Wamp集成环境配置多站点 3.DedeCMS安装及目录结构 4.DedeCMS源码安装 5.DedeCMS官方手册 未完待续...

  10. String path = request.getContextPath();这段什么用

    <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+ ...