我目前正在使用www.firstusadata.com/cash_flow_test/上的网络应用程序 这两个按钮当前添加了产品div和供应商div，这是有效的，但是当附加这些新的div时，它们没有唯一的ID，我无法删除附加的div。
我对两个按钮的当前jquery函数如下所示：
$(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();
}
});
完整代码位于＆＃34; show code snippet＆＃34;以及通过此链接jsfiddle https://jsfiddle.net/8eanq9tv/我希望有人能够帮我解决这个问题。这个社区以前花时间帮助我。谢谢！
function dynamic_html1(){
var content = '<div id="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 id="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;
}
$(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();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="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 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>
<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>
</div>
答案 0 :(得分：1)
这是因为dynamic_content_2是您的ID而不是class
$(".dynamic_content_2").each(function(){
check++;
});
应该像$("#dynamic_content_2").each(
此外，您应该知道
ID应始终是唯一的。你应该用class而不是。