通过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();
		}
	});
});

最后效果如下图：