Question

我的默认视图是这样的。

添加按钮正在按预期工作，但是当我尝试删除克隆的div时，我只能删除最后一个而不是所有克隆的div一个接一个地从最后一个预期默认值。

这是我添加和删除div的Div和Jquery。

添加

 $("#AddSubService").click(function(){
                    $("#SubServices").append($('#SubServiceName').clone(true).find("input").val("").end());
                    $("#SubServices").append($('#SubServiceDescription').clone(true).find("input").val("").end());
                });

删除：

$("#RemoveSubService").click(function(e){                           
                    $("#SubServices").children("div[id=SubServiceDescription]:last").fadeOut();
                    $("#SubServices").children("div[id=SubServiceName]:last").fadeOut();                    
                });

股利：

<div id="SubServices">
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <h2>Sub Services</h2>
                    <input type="button" value="Add" class="btn btn-default" id="AddSubService" /> |
                    <input type="button" value="Remove" class="btn btn-default" id="RemoveSubService" />
                </div>
            </div>

            <div class="form-group" id="SubServiceName">
                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group" id="SubServiceDescription">
                @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

由于我是MVC和Jquery的新手，所以任何正确的方向都可以达到同样的目标。

Answer 1

使用以下脚本功能删除克隆的div

        $("#RemoveSubService").click(function (e) {
            var divCount = $("#SubServices").children("div[id=SubServiceDescription]").length;
            while (divCount > 1) // comparing with 1 beacuse: It will keep default div and remove rest
            {
                $("#SubServices").children("div[id=SubServiceDescription]:last").remove();
                $("#SubServices").children("div[id=SubServiceName]:last").remove();
                divCount--;
            }
        });

Answer 2

这种情况不正确，因为id属性， id属性在html中始终应该是唯一的 为什么，使用class而不是。

Answer 3

＆＃13;

  $(document).ready(function() {
    $('.AddNew').click(function() {
  $(".TargetElements:first").clone().insertAfter('.TargetElements:last');
      $('.Remove').show();
    });
  }); 
  
   

$(document).ready(function () {
            $('.Remove').click(function () {
                if ($(".TargetElements").length > 1) {
                    $(".TargetElements:last").remove();
                }
                else {
                    $('.Remove').hide();
                }
            });
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="TargetElements">
  <label>Name</label> </div>
<div>
  <input type="button" value="Add" class="AddNew" />
  <input type="button" value="Remove" class="Remove" hidden="hidden" />
</div>

＆＃13;

      <div class="TargetElements">
                         <label>Name</label>
                         </div>

  <div> <input type="button" value="Add New Language" class="AddNew" />

                        <input type="button" value="Remove" class="Remove" hidden="hidden" />
                        </div>

     <script>
            $(document).ready(function () {
                $('.AddNew').click(function () {
                    $(".TargetElements:first").clone().insertAfter('.TargetElements:last');
                    $('.Remove').show();
                });
            });
        </script>

        <script>
            $(document).ready(function () {
                $('.Remove').click(function () {
                    if ($(".TargetElements").length > 1) {
                        $(".TargetElements:last").remove();
                    }
                    else {
                        $('.Remove').hide();
                    }
                });
            });
        </script>

使用MVC 5中的jquery从上一个逐个删除克隆的div但不是默认的div

3 个答案: