时间戳

首页 > 解决方案 > 根据下拉值动态添加和删除 Div

javascript - 根据下拉值动态添加和删除 Div

问题描述

我可以根据下拉值动态添加 div。但是在下拉列表中更改为另一个值后，前一个 div 添加到新 div。我如何删除前一个。请在下面查看我的代码。

$(function () {
        $("#HowmanyClone_Id").change(function () {
            debugger;
            var cloneCount = $(this).find(":selected").text();                
            $(this).closest("div.row").remove();
            for (var i = 1; i <= cloneCount; i++) {
                $("#Div_Quick_Clone").append('<div class="row" style="margin-top:10px;"> Serial Number:<input type="text" name="" class="form-control "> <div>  </div> </div>');
            }
        });
    });

HTML：

   <div id="Div_Quick_Clone" style="display: none;">
        <div class="editor-label">
            No of Clones :</div>
        <div class="editor-field">
            <%=Html.DropDownList("HowmanyClone_Id", new List<SelectListItem>
                        {
                            new SelectListItem{ Text="Select To Clone", 
                    Value = "Select" }, 
                        new SelectListItem{ Text="2", Value = "2" }, 
                        new SelectListItem{ Text="3", Value = "3" },
                        new SelectListItem{ Text="4", Value = "4" },
                        new SelectListItem{ Text="5", Value = "5" },
                        new SelectListItem{ Text="6", Value = "6" },
                        }, new { id = "HowmanyClone_Id" })%>
        </div>
     </div>

标签： javascriptjqueryhtmlappend

解决方案

$("#HowmanyClone_Id").change(function() {
  var cloneCount = $(this).find(":selected").text();
  $("#Div_Quick_Clone").find("div.row").remove();
  for (var i = 1; i <= cloneCount; i++) {
    $("#Div_Quick_Clone").append('<div class="row" style="margin-top:10px;"> Serial Number:<input type="text" name="" class="form-control "> <div>  </div> </div>');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="Div_Quick_Clone">
  <div class="editor-label">No of Clones :</div>
  <select id="HowmanyClone_Id">
    <option value="Select">Select To Clone</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>
</div>

您只需将 $(this).closest("div.row").remove() 更改为 $("#Div_Quick_Clone").find("div.row").remove() 。

推荐阅读