点击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. Visual Studio新建的源文件的默认编码

    原来VS新建的源文件默认的编码是根据系统locale选择的.我的是国标2312.我草.可坑死我了.一直不知道. 当时主要是需要用doxygen生成html文档,它默认的输入文件的格式是UTF-8,是不 ...

  2. 【HDOJ】1011 Starship Troopers

    第一道树形DP.很容易理解. #include <cstdio> #include <cstring> #include <cstdlib> #define MAX ...

  3. 【转】随身HiFi 安卓OTG功能在音频上的妙用

    原文网址:http://article.pchome.net/content-1745467.html 随身HiFi 安卓OTG功能在音频上的妙用 [PChome电脑之家音频频道原创]说起Androi ...

  4. 精美实用的jQuery插件精选

    jQuery的确是一款相当强大的Javascript框架,同时jQuery的插件就多入牛毛,如果你善于收集,那么你在写前端页面的时候肯定会更加方便.本文精选了一些精美实用的jQuery插件供大家参考. ...

  5. Android取得电池的电量

    首先需要用到的是一个类继承BrocastReceiver 2 代码如下: public class Battery_Info extends BroadcastReceiver { @Override ...

  6. Codeforces Round #300 F - A Heap of Heaps （树状数组 OR 差分）

    F. A Heap of Heaps time limit per test 3 seconds memory limit per test 512 megabytes input standard ...

  7. [LeetCode] 57. Insert Interval 解决思路

    Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...

  8. ajax弹出窗口

    提取自ZCMS的弹出框: 代替window.open.window.alert.window.confirm:提供良好的用户体验: 水晶质感,设计细腻,外观漂亮: 兼容ie6/7/8.firefox2 ...

  9. Java 多字段排序Comparator(兼容Date,Integer,Doubel,Long)

    Java 反射类:ReflexUtil public class ReflexUtil { static Logger logger = LoggerFactory.getLogger(ReflexU ...

  10. [React Testing] Element types with Shallow Rendering

    When you render a component with the Shallow Renderer, you have access to the underlying object. We ...