Javascript 无法通过在MVC视图中追加另一个div来删除添加运行时间的div
我正在开发ASP.NETMVC应用程序 我使用Jquery在视图上通过单击事件添加Div运行时 添加div后，我正在尝试删除它。。。但是它不能被移除。 我已经把警报框的点击功能删除链接，但也不工作 这是我的完整代码Javascript 无法通过在MVC视图中追加另一个div来删除添加运行时间的div,javascript,jquery,asp.net-mvc,asp.net-mvc-3,asp.net-mvc-4,Javascript,Jquery,Asp.net Mvc,Asp.net Mvc 3,Asp.net Mvc 4,我正在开发ASP.NETMVC应用程序 我使用Jquery在视图上通过单击事件添加Div运行时 添加div后，我正在尝试删除它。。。但是它不能被移除。 我已经把警报框的点击功能删除链接，但也不工作 这是我的完整代码 <script type="text/javascript"> $(document).ready(function () { $('.remove').click(function () {
<script type="text/javascript">
$(document).ready(function () {
$('.remove').click(function () {
alert("asd");
$(this).parent().parent().remove();
});
function getProductList(rIndex) {
//alert("In Product list");
var productList;
var mainList;
var productListArray = [];
$.ajax({
url: '@Url.Content("~/Product/GetProductList")',
success: function(data) {
mainList = data;
var options = '';
temp = 0;
for (var index = 0; index < data.length; index++) {
productListArray[index] = data[index].Id;
options += '<option value="' + data[index].Id + '">' + data[index].Name + '</option>';
}
productList = options;
$("select#ddProductList_" + rIndex).html(productList);
}
});
}
$('#lnkAddProduct').click(function () {
var rIndex = $("select.clsProductId").length;
// $('#ProductList').append("<div><span style='font-size:12px;'><select class='clsProductId' id='ddProductList_" + rIndex + "' name='ProductId' style = 'font-size:12px;width:120px;margin-right:10px;margin-left:0px;' /></span><input type='text' id='SectionCode' style='width:10%; margin-right:30px;'></div>");
$('#ProductList').append("<div><span style='font-size:12px;'><select class='clsProductId' name='ProductId' id='ddProductList_" + rIndex + "'name='ProductId' style = 'font-size:12px;width:150px;margin-right:10px;margin-left:0px;' /></span><input type='text' id='SectionCode' name='SectionCode' style='width:10%; margin-left:7px;'><input type='text' id='Size' name='Size' style='width:5%; margin-left:20px;'><input type='text' id='Length' name='Length' style='width:8%; margin-left:25px;'><input type='text' name='Thickness' id='Thickness' style='width:8%; margin-left:25px;'><input type='text' id='Weight' name='Weight' style='width:8%; margin-left:25px;'/><input type='text' id='Quantity' name='Quantity' style='width:8%; margin-left:30px;'/><span style='margin-left:10px;padding-top:6px;'> <a href='#' style='font-size:14px;text-decoration:none;font-weight:bold;' id='lnkRemove' class='clsRemove remove'>X</a></span></div>");
getProductList(rIndex);
});
getProductList(0);
});
</script>
<html>
<body>
<div class="span11 " style="margin-bottom : 20px; ">
<div class="row-fluid">
<div class="span1" style="margin-left:10px; width:100px;">
Section Name
</div>
<div class="span1" style="margin-left:60px;width:120px;">
Section Code
</div>
<div class="span1" style="margin-left:10px;width:60px;">
Size
</div>
<div class="span1" style="margin-left:20px;width:80px;">
Length
</div>
<div class="span1" style="margin-left:20px;width:80px;">
Thickness
</div>
<div class="span1" style="margin-left:20px;width:90px;">
Avg. Weight
</div>
<div class="span1" style="margin-left:35px;width:80px;">
Quantity
</div>
</div>
<div class="row-fluid" id="ProductList">
@*<input type="text" id="SectionName" style="width:10%; margin-right:40px;" />*@
<span style='font-size: 12px;margin-left:0px;'><select class='clsProductId span11' id='ddProductList_0' name='ProductId' style='font-size:12px;width:150px;margin-right:3px;margin-left:0px;'>
<option selected="selected" value=""></option>
</select></span>
<input type="text" id="SectionCode" name="SectionCode" style="width:10%; margin-left:10px;" />
<input type="text" id="Size" name="Size" style="width:5%; margin-left:20px;" />
<input type="text" id="Length" name="Length" style="width:8%; margin-left:20px;" />
<input type="text" id="Thickness" name="Thickness" style="width:8%; margin-left:20px;" />
<input type="text" id="Weight" name="Weight" style="width:8%; margin-left:20px;" />
<input type="text" id="Quantity" name="Quantity" style="width:8%; margin-left:30px;" />
@* <span style="margin-left:10px;padding-top:6px;"> <a href='#' style='font-size:14px;text-decoration:none;font-weight:bold;' id='lnkRemove' class='clsRemove remove'>X</a></span>
<a href='#' class='123'>X</a>
<div class="span10" style="margin-left:0px;">
<a href="#" id="lnkAddProduct" style="font-size:14px;text-decoration:none;margin-right:10px;">Add Product</a>
<span id="LinkErrorMsg" class="field-validation-error"></span>
</div>
</div>
</body>
</html>
$（文档）.ready（函数（）{
$（'.remove'）。单击（函数（）{
警报（“asd”）；
$（this.parent（）.parent（）.remove（）；
});
函数getProductList（rIndex）{
//警报（“在产品列表中”）；
var产品列表；
var主列表；
var productListArray=[]；
$.ajax({
url:“@url.Content（“~/Product/GetProductList”），
成功：功能（数据）{
mainList=数据；
var选项=“”；
温度=0；
对于（var index=0；index $("#ProductList").on('click','.remove',function () {
alert("asd");
$(this).closest("div.row-fluid").remove(); // Avoid parent().parent() you can use .closest()
});
您需要将单击事件委托给最近的静态容器。你应该能够找到你的问题的百（千？）个副本。。。请阅读：避免使用parent（）。一旦你重构或修改你的用户界面，它很容易出错。1.为您的分区2分配唯一正确的ID。将属性分配给（x），它是div.3的ID。单击“读取属性”，找到div并将其删除。为什么要使用委托？为什么它不使用我的代码，我在同一个项目的其他模块中使用了相同的代码，它工作得很好..它工作得很好，但是它删除了所有的行。。。。如果我添加了4行…如果我点击任何删除按钮，那么它会删除所有行。。。为什么不使用我的代码，我在其他项目中使用了相同的代码…@user1650894然后您可以像这样更改选择器
$（this）.closest（“div”）.remove（）