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

这里是添加输入字段if button的代码，名为“add”，点击时数值会增加（EX：数字1，数字2 &等）添加输入字段，数字增加，并在删除字段后返回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>

来源

2016-03-01 user2580687

Che ck以下片段。

$(function() { 
 
\t \t 
 
     $("#btnAdd").bind("click", function(){ 
 
     var domainNumber = $('.row').length + 1; 
 
\t \t \t 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); 
 
\t \t \t \t 
 
    }); 
 
           
 
     $("body").on("click", ".remove", function() { 
 
      $(this).closest(".row").remove(); 
 
     }); 
 
\t \t \t \t \t \t \t \t 
 
});

.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"> 
 
\t \t \t <div class="col-sm-1"><strong>Domain 1</strong></div> 
 
\t \t \t <div class="col-sm-4"><input type="text" 2 id=""> 
 
</div> 
 
\t \t \t <div class="col-sm-1"> 
 
\t \t \t <button id="btnAdd" type="button" class="btn btn-secondary">Add</button> 
 
     </div> 
 
\t \t \t \t \t \t \t 
 
</div> 
 
\t \t <br> 
 
\t \t \t \t \t  
 
    <div id="TextBoxContainer"> 
 
     <!--Textboxes will be added here --> 
 
    </div>

来源

2016-03-01 11:35:07

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

回答

相关问题