添加输入字段并增加数字，并在删除字段后返回 2

Question

这是添加名为"add"if button输入字段的代码，单击时，值数字将增加（例如：数字1，数字2等）

当我删除添加的输入字段时，数字将继续到数字 4、5。 如果我再次单击"添加"按钮，它应该回到 1、2、3 ...

$(function() {
  var ijk = 2;
  $("#btnAdd").bind("click", function() {
    var add = '<div class="row"><div class="col-sm-1"><strong>Domain ' + ijk + ' </strong></div>' + '<div class="col-sm-4"><input name = "DynamicTextBox"  class="form-control" type="text" value = "" /></div>' + '<div class="col-sm-1"><button class="remove btn btn-danger">cancel</button></div></div> <br />';
    $("#TextBoxContainer").append(add);
    ijk++;
  });
  $("body").on("click", ".remove", function() {
    $(this).closest(".row").remove();
  });
});

.col-sm-1 {
  float: left;
  width: 100px
}
.col-sm-4 {
  float: left;
  width: 170px
}
.row {
  clear: both
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-1"><strong>Domain 1</strong></div>
  <div class="col-sm-4"><input type="text" 2 id="">
  </div>
  <div class="col-sm-1">
    <button id="btnAdd" type="button" class="btn btn-secondary">Add</button>
  </div>
</div>
<br>
<div id="TextBoxContainer">
  <!--Textboxes will be added here -->
</div>

Answer 1

检查以下代码片段。

$(function () {
		 
      $("#btnAdd").bind("click", function (){
      var domainNumber = $('.row').length + 1; 
			var add = '<div class="row"><div class="col-sm-1"><strong>Domain '+ domainNumber +' </strong></div>' + '<div class="col-sm-4"><input name = "DynamicTextBox"  class="form-control" type="text" value = "" /></div>' + '<div class="col-sm-1"><button class="remove btn btn-danger">cancel</button></div></div> <br />';
        $("#TextBoxContainer").append(add);
				
  });
                                
       $("body").on("click", ".remove", function () {
           $(this).closest(".row").remove();
       });
								
 });

.col-sm-1{float:left; width:100px}
.col-sm-4{float:left;width:170px}
.row{clear:both}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
			<div class="col-sm-1"><strong>Domain 1</strong></div>
			<div class="col-sm-4"><input type="text" 2 id="">
</div>
			 <div class="col-sm-1">
			<button id="btnAdd"  type="button" class="btn btn-secondary">Add</button>
       </div>
							  
</div>
		<br>
					     
   <div id="TextBoxContainer">
        <!--Textboxes will be added here -->
   </div>