REF：

Question

我正在开发ASP.NET MVC应用程序。

我正在使用Jquery在View上添加Click Run时间。

enter image description here

添加div后，我试图将其删除......但它无法移除。我已经在删除链接的点击功能上设置了警告框，但这也无法正常工作。

enter image description here

这是我的完整代码......

  <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>

Answer 1

使用.on()尝试事件委派，因为您的删除链接是在运行时创建的。

  $("#ProductList").on('click','.remove',function () {
      alert("asd");
      $(this).closest("div.row-fluid").remove(); // Avoid parent().parent() you can use .closest()
  });

REF：

.closest() API docs

不能通过在MVC视图中附加另一个div来删除添加了runt time的div

1 个答案:

REF：