用Jquery更新HTML附加项

Question

我想创建更新的Jquery附加的HTML项目...

添加的项获得增加的变量x并用于HTML属性name ，当一项被删除而另一项被添加时...如您所见，已经输出的旧项保持相同的ID并创建重复项...

如何删除物品编号（如果已删除）以保持正确的时间顺序？

这是小提琴

 $(document).ready(function() { var max_fields = 3; //maximum input boxes allowed var wrapper = $(".wrap"); //Fields wrapper var add_button = $(".add"); //Add button ID var x = 1; //initlal text box count $(add_button).click(function(e) { //on add input button click e.preventDefault(); if (x < max_fields) { //max input box allowed x++; //text box increment $(wrapper).append('<div><input type="text" name="' + x + '" placeholder="#' + x + '"/><a href="#" class="remove">X</a></div>'); //add input box } }); $(wrapper).on("click", ".remove", function(e) { //user click on remove text e.preventDefault(); $(this).parent('div').remove(); x--; }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="wrap"> <button class="add">Add</button> <div><input type="text" name="1" placeholder="#1"></div> </div> 

Answer 1

这是重新编号的方法

注意我使用输入的数量来计数它们。

我也只更改占位符，而不更改字段内容（如果有）。

 function reNum() { $(".inp").each(function(i) { this.name = (i + 1) $(this).attr("placeholder", "#" + (i + 1)); }) } $(document).ready(function() { var max_fields = 3; //maximum input boxes allowed var $wrapper = $(".wrap"); //Fields wrapper $(".add").click(function(e) { //on add input button click e.preventDefault(); var x = $(".inp").length; if (x >= max_fields) return; x++; $wrapper.append('<div><input class="inp" type="text" name="' + x + '" placeholder="#' + x + '"/><a href="#" class="remove">X</a></div>'); }); $wrapper.on("click", ".remove", function(e) { //user click on remove text e.preventDefault(); $(this).parent('div').remove(); reNum(); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="wrap"> <button class="add">Add</button> <div><input class="inp" type="text" name="1" placeholder="#1"></div> </div> 

Answer 2

尝试这个

 $(document).ready(function() { var max_fields = 5; //maximum input boxes allowed var wrapper = $(".wrap"); //Fields wrapper var add_button = $(".add"); //Add button ID var x = 1; //initlal text box count $(add_button).click(function(e) { //on add input button click e.preventDefault(); if (x < max_fields) { //max input box allowed x++; //text box increment $(wrapper).append('<div class="txt"><input type="text" name="' + x + '" placeholder="#' + x + '"/><a href="#" class="remove">X</a></div>'); //add input box } }); $(wrapper).on("click", ".remove", function(e) { //user click on remove text e.preventDefault(); $(this).parent('div').remove(); x--; var count = $('.txt').length; $('.txt').remove(); for (var i = 1; i <= count; i++) { var template = '<div class="txt"><input type="text" name="' + i + '" placeholder="#' + i + '"/>' if (i > 1) template += '<a href="#" value=' + i + ' class="remove">X</a>' template += '</div>' $(wrapper).append(template); } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrap"> <button class="add">Add</button> <div class="txt"><input type="text" name="1" placeholder="#1"></div> </div>