为在click函数上生成的动态html添加唯一ID

Question

我正在使用here上看到的php表单 添加新产品和添加新供应商的按钮正常工作，但所创建的附加div当前共享相同的Div ID。因此，当您删除附加的div时，它们都将被删除。

有没有办法为这些附加的div添加一个唯一的ID，以便我可以单独删除它们？

您可以在下面的代码段或JSFiddle

上查看我的完整代码

		function dynamic_html1(){
			var content = '<div class="dynamic_content_1">'
			+'<div class="row">'
						+'<div class="col-sm-3 col-sm-offset-1">'
							+'<div class="form-group w100">'
								+'<input type="" class="form-control  w100" id="" name="product_name[]" placeholder="Product" required >'
							+'</div>'
						+'</div>'
						
						+'<div class="col-sm-2">'
							+'<div class="form-group  w100">'
								+'<input type="" class="form-control w100 price" id="" name="product_price[]" placeholder="Price" required >'
							+'</div>'
						+'</div>'
						
						+'<div class="col-sm-3">'
							+'<select class="form-control w100" id="" name="product_type[]" required >'
								+'<option value="">Select</option>'
								+'<option value="Web Development">Web Development</option>'
								+'<option value="Business Development">Business Development</option>'
							+'</select>'
						+'</div>'
						
						+'<div class="col-sm-3">'
							+'<div class="btn-inline margin_left_25">'
								+'<button type="button" class="btn addproduct btn-default pull-left">'
									+'<i class="fa fa-plus"></i>'
								+'</button>'
								
								+'<button type="button" class="btn removeproduct btn-default pull-left">'
									+'<i class="fa fa-minus"></i>'
								+'</button>'
							+'</div>'
						+'</div>'
					+'</div>';
			return content;
		}
		
		

		
		
		
		function dynamic_html2(){
			var content =  '<div class="dynamic_content_2">'                    
		+'<div class="row">'
			+'<div class="col-sm-8 col-sm-offset-2 SecPageMain">'
			            +'<h3>Vendor Information</h3>'
				+'<form method="post" action="http://firstusadata.com/cash_flow/companies/insert_company_information">'
					+'<div class="row margin_top_25">'
						+'<div class="col-md-4 col-md-offset-1 col-sm-12">'
							+'<p>Name of Company:</p>'
						+'</div>'
										
						+'<div class="col-md-6 col-sm-12">'
							+'<input type="text" class="form-control pull-left w100" name="company_name" required="" >'
						+'</div>'
					+'</div>'

					+'<div class="row margin_top_25">'
						+'<div class="col-md-4 col-md-offset-1 col-sm-12">'
							+'<p>Company Phone Number:</p>'
						+'</div>'
										
						+'<div class="col-md-6 col-sm-12">'
							+'<input type="text" class="form-control pull-left w100" id="" name="company_phone" required="" >'
						+'</div>'
					+'</div>'

					+'<div class="row margin_top_25">'
						+'<div class="col-md-5 col-md-offset-1 col-sm-12">'
							+'<p>Did this company build your website?</p>'
						+'</div>'
										
						+'<div class="col-md-5 col-sm-12">'
							+'<div class="radio radio-info radio-inline" >'
								+'<input type="radio"  value="1" name="built_website">'
								+'<label for="inlineRadio1"> Yes </label>'
							+'</div>'
							+'<div class="radio radio-inline">'
								+'<input type="radio"  value="0" name="built_website" checked>'
								+'<label for="inlineRadio2"> No </label>'
							+'</div>'
						+'</div>'
					+'</div>'
					
					+'<div class="hide" id="BuildWebsite" >'
						+'<div class="row margin_top_10">'
							+'<div class="col-md-4 col-md-offset-1 col-sm-12">'
								+'<p>Website URL:</p>'
							+'</div>'
											
							+'<div class="col-md-6 col-sm-12">'
								+'<input type="text" class="form-control pull-left w100" id="website_url" name="website_url">'
							+'</div>'
						+'</div>'
						
						+'<div class="row margin_top_10">'
							+'<div class="col-md-4 col-md-offset-1 col-sm-12">'
								+'<p>Type of Website:</p>'
							+'</div>'
											
							+'<div class="col-md-6 col-sm-12">'
								+'<select class="form-control w100" id="type_of_website" name="type_of_website">'
									+'<option value="Amazon Store">Amazon Store</option>'
									+'<option value="Affiliate">Affiliate</option>'
									+'<option value="Drop Ship">Drop Ship</option>'
									+'<option value="Lead Generation">Lead Generation</option>'
									+'<option value="Small Business">Small Business</option>'
									+'<option value="Landing Page">Landing Page</option>'
								+'</select>'
							+'</div>'
						+'</div>'
						
						+'<div class="row margin_top_10 category_area" style="display:none">'
							+'<div class="col-md-4 col-md-offset-1 col-sm-12">'
								+'<p>Category:</p>'
							+'</div>'
							
							+'<div class="col-md-6 col-sm-12">'
								+'<select class="form-control w100" id="website_category" name="website_category">'
									+'<option value="">Select category</option>'
								+'</select>'
							+'</div>'
						+'</div>'
						
						+'<div class="row margin_top_10">'
							+'<div class="col-md-4 col-md-offset-1 col-sm-12">'
								+'<p>Average Profit Margin Per 100 Users:</p>'
							+'</div>'
											
							+'<div class="col-md-6 col-sm-12">'
							+'	<input type="text" class="form-control pull-left w100 price" id="average_profit" name="average_profit">'
							+'</div>'
						+'</div>'
					+'</div>'
					
					+'<div id="dynamic_content_2">'
						+'<div class="row margin_top_25 form-inline product_row">'
							+'<div class="col-sm-3 col-sm-offset-1">'
								+'<div class="form-group w100">'
									+'<input type="" class="form-control  w100" id="" name="product_name[]" placeholder="Product"  required>'
								+'</div>'
							+'</div>'
							
							+'<div class="col-sm-2">'
								+'<div class="form-group  w100">'
									+'<input type="" class="form-control w100 price" id="" name="product_price[]" placeholder="Price"  required>'
								+'</div>'
							+'</div>'
							
							+'<div class="col-sm-3">'
								+'<select class="form-control w100" name="product_type[]" required>'
									+'<option value="">Select</option>'
									+'<option value="Web Development">Web Development</option>'
									+'<option value="Business Development">Business Development</option>'
								+'</select>'
							+'</div>'
							
							+'<div class="col-sm-3">'
								+'<div class="btn-inline margin_left_25">'
									+'<button type="button" class="btn addproduct btn-default pull-left">'
										+'<i class="fa fa-plus"></i>'
									+'</button>'
									
									+'<button type="button" class="btn btn-default removeproduct pull-left">'
										+'<i class="fa fa-minus"></i>'
									+'</button>'
								+'</div>'	
							+'</div>'
						+'</div>'
					+'</div>'
                    
                    
           +'<h4>Add Vendor</h4>'         
            +'<div class="col-sm-3">'
								+'<div class="btn-inline margin_left_25">'
									+'<button type="button" class="btn addvendor btn-default pull-left">'
										+'<i class="fa fa-plus"></i>'
									+'</button>'
									
									+'<button type="button" class="btn btn-default removevendor pull-left">'
										+'<i class="fa fa-minus"></i>'
									+'</button>'
								+'</div>'
							+'</div>'                 
				+'</form>'
			+'</div>'
		+'</div>'
       +' </div>';
			return content;
		}

	
		//alert(dynamic_html());
		
		$(document).on("click",".addproduct",function(){
			$(".dynamic_content_2").append(dynamic_html1());
		});
		
		$(document).on("click",".removeproduct",function(){
			var check = 0;
			$(".dynamic_content_2").each(function(){
				check++;
			});
			if(check>0){
				$(this).parents(".dynamic_content_2").remove();
			}
		});
		

		$(document).on("click",".addvendor",function(){
			$(".dynamic_content_1").append(dynamic_html2());
		});
		
		$(document).on("click",".removevendor",function(){
			var check = 0;
			$(".dynamic_content_1").each(function(){
				check++;
			});
			if(check>0){
				$(this).parents(".dynamic_content_1").remove();
			}
		});




		$(document).on("click","input[name='built_website']",function(){
			var value = $(this).val();
			if(value==="1"){
				$("#BuildWebsite").removeClass("hide");
			}else{
				$("#BuildWebsite").addClass("hide");
			}
		});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dynamic_content_1">                     
		<div class="row">
			<div class="col-sm-8 col-sm-offset-2 SecPageMain">
			            <h3>Vendor Information</h3>
				<form method="post" action="http://firstusadata.com/cash_flow/companies/insert_company_information">
					<div class="row margin_top_25">
						<div class="col-md-4 col-md-offset-1 col-sm-12">
							<p>Name of Company:</p>
						</div>
										
						<div class="col-md-6 col-sm-12">
							<input type="text" class="form-control pull-left w100" name="company_name" required='' >
						</div>
					</div>

					<div class="row margin_top_25">
						<div class="col-md-4 col-md-offset-1 col-sm-12">
							<p>Company Phone Number:</p>
						</div>
										
						<div class="col-md-6 col-sm-12">
							<input type="text" class="form-control pull-left w100" id="" name="company_phone" required='' >
						</div>
					</div>

					<div class="row margin_top_25">
						<div class="col-md-5 col-md-offset-1 col-sm-12">
							<p>Did this company build your website?</p>
						</div>
										
						<div class="col-md-5 col-sm-12">
							<div class="radio radio-info radio-inline" >
								<input type="radio"  value="1" name="built_website">
								<label for="inlineRadio1"> Yes </label>
							</div>
							<div class="radio radio-inline">
								<input type="radio"  value="0" name="built_website" checked>
								<label for="inlineRadio2"> No </label>
							</div>
						</div>
					</div>
					
					<div class="hide" id="BuildWebsite" >
						<div class="row margin_top_10">
							<div class="col-md-4 col-md-offset-1 col-sm-12">
								<p>Website URL:</p>
							</div>
											
							<div class="col-md-6 col-sm-12">
								<input type="text" class="form-control pull-left w100" id="website_url" name="website_url">
							</div>
						</div>
						
						<div class="row margin_top_10">
							<div class="col-md-4 col-md-offset-1 col-sm-12">
								<p>Type of Website:</p>
							</div>
											
							<div class="col-md-6 col-sm-12">
								<select class="form-control w100" id="type_of_website" name="type_of_website">
									<option value="Amazon Store">Amazon Store</option>
									<option value="Affiliate">Affiliate</option>
									<option value="Drop Ship">Drop Ship</option>
									<option value="Lead Generation">Lead Generation</option>
									<option value="Small Business">Small Business</option>
									<option value="Landing Page">Landing Page</option>
								</select>
							</div>
						</div>
						
						<div class="row margin_top_10 category_area" style="display:none">
							<div class="col-md-4 col-md-offset-1 col-sm-12">
								<p>Category:</p>
							</div>
							
							<div class="col-md-6 col-sm-12">
								<select class="form-control w100" id="website_category" name="website_category">
									<option value="">Select category</option>
								</select>
							</div>
						</div>
						
						<div class="row margin_top_10">
							<div class="col-md-4 col-md-offset-1 col-sm-12">
								<p>Average Profit Margin Per 100 Users:</p>
							</div>
											
							<div class="col-md-6 col-sm-12">
								<input type="text" class="form-control pull-left w100 price" id="average_profit" name="average_profit">
							</div>
						</div>
					</div>
					
					<div class="dynamic_content_2">
						<div class="row margin_top_25 form-inline product_row">
							<div class="col-sm-3 col-sm-offset-1">
								<div class="form-group w100">
									<input type="" class="form-control  w100" id="" name="product_name[]" placeholder="Product"  required>
								</div>
							</div>
							
							<div class="col-sm-2">
								<div class="form-group  w100">
									<input type="" class="form-control w100 price" id="" name="product_price[]" placeholder="Price"  required>
								</div>
							</div>
							
							<div class="col-sm-3">
								<select class="form-control w100" name="product_type[]" required>
									<option value="">Select</option>
									<option value="Web Development">Web Development</option>
									<option value="Business Development">Business Development</option>
								</select>
							</div>
							
							<div class="col-sm-3">
								<div class="btn-inline margin_left_25">
									<button type="button" class="btn addproduct btn-default pull-left">
										<i class="fa fa-plus"></i>
									</button>
									
									<button type="button" class="btn btn-default removeproduct pull-left">
										<i class="fa fa-minus"></i>
									</button>
								</div>	
							</div>
						</div>
					</div>
                    
                    
           <h4>Add Vendor</h4>          
             <div class="col-sm-3">
								<div class="btn-inline margin_left_25">
									<button type="button" class="btn addvendor btn-default pull-left">
										<i class="fa fa-plus"></i>
									</button>
									
									<button type="button" class="btn btn-default removevendor pull-left">
										<i class="fa fa-minus"></i>
									</button>
								</div>	
							</div>          
                    
                    
                    
                    
					
					<div class="row margin_top_25 margin_bottom_25">	
						<div class="col-md-4 col-md-offset-1 col-sm-12">
						</div>
						<div class="col-md-6 col-sm-12">
						                    <div class="btn-inline">
									
								<button type="submit" class="btn btn-success pull-right">Summary</button>
															</div>	
						</div>	
					</div>

				</form>
			</div>
		</div>
        </div>

Answer 1

您可以向javascript var i = 1添加计数器（在函数范围之外），并在添加dynamic_content_2的新实例时将其递增。 将dynamic_html2()的第一行更改为阅读var content = '<div class="dynamic_content_2" id="addedForm' + i +'">'。在函数结束时，只需增加i的值。 i++。

现在将.removevendor点击功能更改为：

$(document).on("click",".removevendor",function(){
    i--;
    $('#addedForm' + i).remove();
});

这可以解决您的问题。

修改 Here's a Fiddle

编辑2：

由于@nnnnnn指出您可以使用closest()。这实际上是更好，更简单的方法。您可以将.removevendor点击功能更改为：

$(document).on("click",".removevendor",function(){
    $(this).closest('.dynamic_content_2').remove();
});