Добавлять и удалять Div динамически на основе значения выпадающего

Question

Я могу добавить 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>

Answer 1

$("#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 () только.