将唯一 ID 添加到在单击函数上生成的动态 html
Add unique ID to dynamic html that is generated on click function
我正在研究一个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>您可以向 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();
});
这应该可以解决您的问题。
编辑：这是一个小提琴
编辑2：
正如@nnnnnn指出的那样，您可以使用 closest() .这实际上是更好，更简单的方法。您可以将.removevendor单击功能更改为：
$(document).on("click",".removevendor",function(){
$(this).closest('.dynamic_content_2').remove();
});
相关文章：
- 使用jQuery根据动态生成的html动态添加html
- HTML动态更新滑块输入
- 无法从HTML动态表中获取数据
- Python/JavaScript/HTML 动态创建计算机网络图
- 从 html 动态调用 javascript 对象函数
- 通过内部HTML动态创建日历不起作用
- 如何将节点内容从 xml 复制到硬编码的 html(动态到原始 html）
- 为什么我无法使用jQuery将HTML动态添加到页面
- 如何读取html表中复选框的值，该表是作为内部html动态插入到表单元格中的
- 如何使用Javascript获取HTML动态用户输入的值
- 从html动态加载angularjs控制器
- Html动态错误javascript Uncaught TypeError:$不是函数
- 如何将html动态嵌入到框架标记中
- HTML动态裁剪
- 使用jQuery和HTML动态创建标签，并使用jQuery访问其文本值
- HTML动态/响应式元素定位
- 我如何使用下面的html动态创建wordcloud为我的android应用程序
- 使用.html()动态更改数据后单击function
- JavaScript中的Html动态表
- JS/HTML——动态创建带有选项的select元素
