点击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. perl dbi 测试 mysql wait_timeout

    The number of seconds the server waits for activity on a noninteractive connection before closing it ...

  2. HDOJ 1164 Eddy's research I(拆分成素数因子)

    Problem Description Eddy's interest is very extensive, recently he is interested in prime number. Ed ...

  3. 生成excel内存溢出问题的解决方式

    常用的excel生成工具包括jxl.poi.但二者都存在一个问题:生成excel需要大量的消耗内存.如果一次性往excel中写入的数据足够的多将导致内存溢出. 1.数据写入excel为什么会大量的消耗 ...

  4. Windows下重启指定名称的服务

    // 重启指定服务 void CPSSDPrinterCtrlPlug::RestartService(const wchar_t* nswServiceName) { SC_HANDLE schSC ...

  5. HybridApp开发准备工作——WebView

    如大家所见,手机真是越来越离不开我们的日常生活了,像我,现在出门必带的是手机.移动电源.公交卡:钱包什么的再也没出过门.两年前,我还在Android的应用开发中当了一次过客.嗯,当时JAVA学得太糟糕 ...

  6. Dubbo亮点总结

    Dubbo是阿里巴巴的一个开源RPC项目,可在http://dubbo.io进行訪问 类似的产品有Hessian.spring httpinvoke 等. Dubbo的亮点总结例如以下: 1.服务注冊 ...

  7. cocos2d-x 2.x 图层特效Effect(转)

    CCSprite* sp = CCSprite::create("Default.png"); sp->setPosition(ccp(, )); addChild(sp); ...

  8. 收集的URL

    *******************************************看文章的好地方************************************** http://www. ...

  9. （七）《Java编程思想》——多态的缺陷

    1.不能“覆盖”私有方法 package chapter8; /** * 不能"覆盖"私有方法 */ public class PrivateOverride { private ...

  10. 路由器密码破解工具 Hydra 7.5

    之前只在 Browser 中保存了路由管理密码,无奈升级时管理的密码丢失了,又不想重新设置,所以尝试破解登录密码. 使用破解工具 Hydra 7.5. # hydra -l username -x : ...