我正在开发 MVC 应用程序。
我有一个 View ,在其中按行显示数据。
我在该行中放置了一个删除链接,当用户单击该链接时,该行应该被删除。
但是它不起作用......
我以以下格式显示数据。
$('#ProductList').append("<div class='span12' style='margin-left:0px' ><div class='span2'>" +
"<select class='clsProductId ' name='ProductId' id='ddProductList_" + IDD + "' style = 'font-size:12px;width:200px;margin-right:80px;margin-left:20px;' onchange='get(" + IDD + ")'/> </div>" +
"<div id='ProductCode_" + IDD + "' class='span1' style=' margin-left:85px;'></div>" +
"<div id='Weight_" + IDD + "' class='span1' style=' margin-left:55px;'> </div>" +
"<div class='span1'style='margin-left:0px;'><input type='text' id='Quantity_" + IDD + "' class='clsQuantity' name='Quantities' style='width:50px; margin-left:0px;' onblur='StockLinkVisible(" + IDD + ");' /></div>" +
"<div class='span1' style='margin-left:0px;'><a href='#' style='font-size:14px;text-decoration:none;font-weight:bold; color :#ee8929; margin-left:20px;' id='lnkRemove_" + IDD + "' class='clsRemove' onclick='removeElement(" + IDD + ");'>X</a></div>" +
"<div class='span1'style='margin-left:10px; Width:60px;' id='Bandra_" + IDD + "'>123</div>" +
"<div class='span1'style='margin-left:10px; Width:60px;' id='Dadar_" + IDD + "'>123</div>" +
"<div class='span1'style='margin-left:0px; Width:60px;' id='Bhivandi_" + IDD + "'>123</div>" +
"<div class='span1'style='margin-left:10px; Width:40px;' id='Juhu_" + IDD + "'>123</div>" +
"<div class='span1'style='margin-left:10px; Width:40px;' id='Kurla_" + IDD + "'>123</div>" +
"<div class='span1'style='margin-left:10px; Width:60px;' id='Dombivali_" + IDD + "'>123</div>" +
"<div class='span1'style='margin-left:15px; Width:40px;' id='Worli_" + IDD + "'>123</div>" +
"<div class='span1'style='margin-left:15px; Width:60px;' id='Sant_" + IDD + "'>123</div>" +
"<div class='span1'style='margin-left:0px; Width:40px;' id='Bandra_" + IDD + "'>123</div>" +
"<hr></div>");
为了删除该行,我编写了以下代码...
function removeElement(cnt)
{
$("#ProductList").on('click', '#lnkRemove_'+cnt, function () {
$(this).closest("div").remove();
});
}
请检查下面的图片以获得更好的想法......
最佳答案
在点击事件上,您调用一个函数
onclick='removeElement(" + IDD + ");
该函数将另一个点击处理程序绑定(bind)到自身,但实际上并不执行任何操作。此外,点击处理程序将查找最近的 div,它只包含删除按钮,因此并不能完全满足您的要求。
$("#ProductList").on('click', '#lnkRemove_'+cnt, function () {
$(this).closest("div").remove();
});
这是我的建议:删除 onclick 事件和函数,并在文档准备好后,注册一个通用点击操作,如下所示:
$('#ProductList').on('click', '.clsRemove', function() {
$(this).closest('div.span12').remove();
});
我选择 span12
类作为选择器,只是因为它是我看到的唯一一个顶级包装 div(“行”)所具有的选择器。请随意添加更具描述性的选择器并使用它。
关于javascript - 如何从 MVC View 中删除整个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22712303/