如何從MVC視圖中刪除整個div？

Question

我正在開發MVC應用程序。

我有一個視圖，在其中我可以顯示數據行。

我已在該行中放置了一個刪除鏈接，當用戶單擊該鏈接時，該行應被刪除。

但是它不起作用...

我以以下格式顯示數據。

  $('#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(); 
        });
    }

請檢查下面的圖片以獲得更好的主意...

Answer 1

在click事件上，您調用一個函數

onclick='removeElement(" + IDD + ");

此函數將另一個單擊處理程序綁定到其自身，但實際上不執行任何操作。 此外，單擊處理程序將查找最接近的div，該div僅包裝了Delete按鈕，因此並不能完全滿足您的要求。

 $("#ProductList").on('click', '#lnkRemove_'+cnt, function () {
     $(this).closest("div").remove(); 
 });

這是我的建議：刪除onclick事件和函數，並在准備好文檔后，按如下所示注冊一般的click操作：

$('#ProductList').on('click', '.clsRemove', function() { 
    $(this).closest('div.span12').remove();
});

我之所以選擇span12類作為選擇器，只是因為它是我看到的頂級包裝div（“行”）中僅有的一個。 隨意添加一個更具描述性的選擇器，並使用它。

Answer 2

您無需為每個元素調用removeElement 。 只需在document.ready中配置以下代碼

$(document).ready(function(){
 $("#ProductList").on('click', '.clsRemove', function () {
        $(this).parents("div.span12:first").remove();
 });
});

Answer 3

更新為此：

function removeElement(cnt)
{
   $('#lnkRemove_'+cnt).closest("div.span12").remove(); 
}

---

您不需要再次綁定click事件，而是可以按照建議的方式進行操作或將其委托給最接近的靜態父對象（更好的方法是嘗試不干擾js） ：

$("#ProductList").on('click', '[id^="lnkRemove"]', function () {
    $(this).closest("div.span12").remove(); 
});