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:

$HOWMANCYCLONE_Id.changefunction{ var cloneCount=$this.find:selected.text； $Div\u Quick\u Clone.finddiv.row.remove；

---

对于var i=1，我只需在调试器的下方添加$Div\u Quick\u Clone.htmlJS@Harry一切都很完美，只需替换我上面提到的内容。无需进行更多更改。$this.closestdiv.row.remove如果要删除，它将找不到任何标记，因此需要捕获父标记，然后找到合适的对象。

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