Javascript 如何从MVC视图中删除整个div?
我正在开发MVC应用程序 我有一个按行显示数据的视图 我在该行中放置了一个删除链接,当用户单击该链接时,该行应该被删除 但它不起作用 我用以下格式显示数据Javascript 如何从MVC视图中删除整个div?,javascript,jquery,asp.net-mvc,Javascript,Jquery,Asp.net Mvc,我正在开发MVC应用程序 我有一个按行显示数据的视图 我在该行中放置了一个删除链接,当用户单击该链接时,该行应该被删除 但它不起作用 我用以下格式显示数据 $('#ProductList').append("<div class='span12' style='margin-left:0px' ><div class='span2'>" + "<select class='clsProductId ' name='Produc
$('#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>");
请查看下面的图片以了解更好的想法。。。
在单击事件中,您调用一个函数
onclick='removeElement(" + IDD + ");
此函数将另一个单击处理程序绑定到自身,但实际上不执行任何操作。此外,click处理程序将查找最接近的div,它只包装delete按钮,因此不能完全满足您的需要
$("#ProductList").on('click', '#lnkRemove_'+cnt, function () {
$(this).closest("div").remove();
});
我的建议是:删除onclick事件和函数,在文档准备就绪时,注册一个通用的单击操作,如下所示:
$('#ProductList').on('click', '.clsRemove', function() {
$(this).closest('div.span12').remove();
});
我选择class
span12
作为选择器,因为它是我看到的顶级包装div(“行”)唯一的一个选择器。您可以随意添加更具描述性的选择器并使用它。您无需为每个元素调用removelement
。只需在document.ready中配置以下代码
$(document).ready(function(){
$("#ProductList").on('click', '.clsRemove', function () {
$(this).parents("div.span12:first").remove();
});
});
最新情况:
function removeElement(cnt)
{
$('#lnkRemove_'+cnt).closest("div.span12").remove();
}
您不需要再次绑定
单击事件,而是可以按照建议或更好的方式将事件委托给最近的静态父级(尝试低调js):
您已经绑定了内联处理程序removeElement()
为什么要在同一个目录中再次执行事件委派?。clsRemove
没有类span12
@AndreasCarlbom的父级,请参见#product的第一个子元素<代码>我看到了,但是jQuery函数只会上升一级,到包装div,或者在本例中,是类为span1
的div。传递给.parent()
的筛选选择器将确保返回空结果集,因为包装div没有类span12
。您正在查找的函数可能是,它将继续向上遍历,直到找到匹配项或遇到DOM结尾为止。@AndreasCarlbom,找到了。谢谢并更新了我的答案
function removeElement(cnt)
{
$('#lnkRemove_'+cnt).closest("div.span12").remove();
}
$("#ProductList").on('click', '[id^="lnkRemove"]', function () {
$(this).closest("div.span12").remove();
});