`
zxt1985
  • 浏览: 21246 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

通过jquery的clone方法实现动态添加input并删除input

阅读更多

使用jQuery的clone()方法可以实现动态添加一个或一组元素,很方便,但是需要注意一个问题是:clone(true)表示可以复制事件和元素,clone(false)表示只复制元素,不复制事件。之前我在网上搜到好多关于动态添加和删除元素的相关文章,都不能解决我目前的需求,而且删除还不好使(原因是clone(true)后,把click里面的方法都复制了一份)。今天我自己解决了这个问题,mark一下,以备后用。

HTML:
<div class="widget-body">
	<div class="widget-main">			
		<div class="form-group">
			<label class="col-sm-3 control-label no-padding-right"> </label>
			<div class="col-sm-9">
				<span class="input-icon">
					<select id="switch_t_language" name="tl">
						<option value="en">English</option>         
						<option value="zh-CN">Chinese(Simplified)</option>  
						<option value="zh-TW">Chinese(Traditional)</option>      
						<option value="ja">Japanese</option>       
						<option value="ko">Korean</option>         
                	</select>
				</span>
				<span class="input-icon">												
					<i class="icon-comment green"></i>
					<input type="text" id="message" name="message" style="width:500px;" placeholder="Send Messages...">
				</span>
				<a href="javascript:;" class="btn btn-link dictpush-plus" >
					<i class="fa fa-plus green"></i>
				</a>
				<span id="message_span"></span>
			</div>
		</div>
	
	</div>
</div>


JS:
$(function(){		
	//add row
	$(".dictpush-plus").click(function(){
		if($(this).hasClass("dictpush-plus")){//这个是添加一组元素的
			$(this).parents(".form-group").clone(true).appendTo($(".widget-main"));
			$(this).children().removeClass("fa-plus").removeClass("green").addClass("fa-minus").addClass("red");
			$(this).removeClass("dictpush-plus").addClass("dictpush-minus");
		}else if($(this).hasClass("dictpush-minus")){//这个判断是为了删除元素用的,不能用bind或者click的方法,试了都不行
			$(this).parents(".form-group").remove();
		}
	});
});


最后效果如下图:

  • 大小: 33.5 KB
0
0
分享到:
评论

相关推荐

    jquery动态复制或者删除input表单特效代码下载.zip

    本资源“jquery动态复制或者删除input表单特效代码下载.zip”提供了利用jQuery实现的一种实用功能,即动态地在网页上复制或删除input表单元素,这对于创建动态、交互性强的用户界面非常有用。 首先,jQuery的选择器...

    jquery动态添加 删除指定行元素

    本文将深入探讨如何利用jQuery实现动态添加和删除指定行的功能。 首先,我们来看动态添加行的操作。这个过程通常包括获取表格引用、计算新行的索引、克隆已有行并将其插入到表格中。在提供的代码中,`add()`函数...

    关于jquery实现动态的增加删除条件拼串组合

    本文将深入探讨如何使用jQuery实现动态地增加和删除条件拼串组合,这是一个在开发过程中常见且实用的功能,尤其对于前端交互丰富的应用来说。 首先,我们需要了解jQuery的基本用法。jQuery通过选择器选取DOM元素,...

    巧妙使用JQuery Clone 添加多行数据,并更新到数据库的实现代码

    本文介绍了如何通过使用JQuery的Clone方法来巧妙添加多行数据,并将这些数据更新到数据库中。首先,我们看到的是一个前端页面的HTML代码,这个页面包含了动态添加数据行的功能。接下来,我们深入探讨JQuery的Clone...

    基于jQuery实现表格数据的动态添加与统计的代码

    总的来说,通过jQuery的高效DOM操作和事件处理能力,我们可以轻松实现动态表格的功能,包括数据的添加、删除、统计以及复杂的业务逻辑。这种做法降低了代码的复杂度,提高了开发效率,使得前端开发者能够更加专注于...

    jQuery 文档操作方法

    toggleClass() 方法用于从匹配的元素中添加或删除一个类。 语法:`$(selector).toggleClass(className)` 参数: * `selector`:选择器,用于选择要添加或删除类的元素。 * `className`:要添加或删除的类名。 ...

    jquery常用的方法

    - `$.extend(prop)` - 扩展jQuery对象,添加新的方法或属性。 - `jQuery( expression, [context] )` - 选择元素,`expression`是选择器,`context`是可选的上下文元素。 13. **遍历函数**: - `each( callback )...

    jQuery常用方法jQuery常用方法

    根据提供的文件信息,我们可以归纳出一系列关于jQuery的重要知识点与用法。...以上是基于提供的文件内容整理出来的jQuery知识点概览,这些基本的方法和功能可以帮助开发者更高效地操作DOM元素,实现丰富的动态效果。

    jQuery方法大全

    jQuery 是一个广泛使用的JavaScript库,它...jQuery方法提供了丰富的功能,简化了JavaScript中的DOM操作,使得网页动态效果的实现变得更加容易和高效。通过熟练掌握这些方法,开发者可以更便捷地构建交互式的Web应用。

    JQUERY 常用方法大全

    ### JQUERY 常用方法大全 #### 一、Attribute(属性操作) 1. **`.addClass()`** - **用途**:为匹配元素添加一个或多个类。 - **示例**: ```javascript $("p").addClass("highlight"); ``` 这将为所有的`...

    jquery动态添加删除一行数据示例

    本示例主要讲解如何使用jQuery动态地在表格中添加和删除一行数据,这对于构建可交互的用户界面非常有用。 首先,我们来看一下HTML结构。这个示例中有一个表格,包含两列:姓名和地址,每行都有一个删除按钮。表格...

    jQuery框架方法大全

    jQuery框架是JavaScript的一个库,它极大地简化了DOM操作、事件处理、动画设计和Ajax交互。这个框架使得前端开发更为高效和简洁。...通过熟练掌握这些方法,开发者可以更高效地进行前端开发,提高工作效率。

    jquery方法大全

    - **$.fn.extend()**:扩展jQuery原型,用于添加新的方法给jQuery对象。 - **$().click(function(){...})**:为元素绑定点击事件。 - **$("div&gt;p").css("border","1px solid gray")**:为div的子节点p添加样式。 - *...

    动态插入和删除节点

    综上所述,Java中的动态插入和删除节点主要通过前端技术实现,尤其是利用jQuery库简化DOM操作。掌握这些技巧,可以让你构建出更加灵活和交互丰富的Web应用程序。在实际项目中,配合服务器端的Java代码,可以实现更...

    jquery 使用方法

    这个库的主要优点在于其易用性和丰富的功能,使得开发者能够快速实现动态效果和交互。以下是对标题“jQuery 使用方法”和描述中提及的知识点的详细解释: ### 一、选择网页元素 jQuery 的核心功能是选择网页元素并...

    Jquery常用方法.txt

    ### Jquery常用方法详解 #### 属性操作 (Attribute) 1. **添加样式**: `$("p").addClass(css中定义的...以上介绍了JQuery中的一些核心方法及其使用场景,这些方法可以帮助开发者更加高效地进行网页的动态管理和交互。

    jquery 事件方法大全

    jQuery 是一个流行的 JavaScript 库,它简化了DOM操作、事件处理、动画效果和Ajax交互。以下是对标题和描述中提到的jQuery事件方法的详细说明: ...通过熟练掌握这些方法,开发者可以更高效地进行网页交互和动态更新。

    jQuery复制移除表单元素代码.zip

    "jQuery复制移除表单元素代码.zip"这个资源包含了一个使用jQuery 1.7.2版本实现的功能,即动态复制和删除表单元素。以下是关于这个主题的详细知识点: 1. **jQuery基本概念**: - jQuery是John Resig于2006年创建...

Global site tag (gtag.js) - Google Analytics