动态删除输入字段

我想之前已经问过这个问题，但我在论坛上找不到答案。 我有一个带有问题的表格和5个可能的答案。 如果用户想要添加答案，他会点击“添加答案”。 这很好用。

但是，当用户添加所有可能的响应并决定取消回复4，然后添加响应时，响应计数器不再跟随，并且可以有多次回答5。

如何始终按时间顺序排列？

HTML

 
 
 Question 
  
 
 
 
 Answer 1 
  
 
 
 Answer 2 
  
 
 
 
 
 Add an answer  
 
 
  

和javascript

 var max_fields = 3; var wrapper = $('.input_fields_wrap'); var add_button = $('.add_field_button'); var x = 0; $('.rep_possible').html('Encore ' + (x+3)); $(add_button).click(function (e) { e.preventDefault(); if(x < max_fields){ x++; if (max_fields-x == 0) { $('.add_field_button').attr('disabled', 'disabled'); $('.rep_possible').html('5 réponses maximum'); } else { $('.rep_possible').html('Encore ' + (max_fields-x)); } wrapper.append('
Réponse ' + (x+2) + '
X
'); } }); wrapper.on("click",".remove_field", function (e) { e.preventDefault(); $(this).parent().closest('.form-group').remove(); x--; if (max_fields-x != 0) { $('.add_field_button').removeAttr('disabled'); $('.rep_possible').html('Encore ' + (max_fields-x)); } }); 

请在这里找到jsfiddle

带图片的好总结

Answer 1

删除后，您需要重新编号。

我把答案编号包裹在一个span

然后更改添加和删除处理程序以调用以下函数

 function reNumberAnswers(){ wrapper.find('.form-group[data-option]').each(function(index){ var self = $(this); self.attr('data-option', index + 3) .find('.counter').text(index + 3); }); } 

演示http://jsfiddle.net/gaby/qLr5huLw/3/

Answer 2

那么你可以修改你的删除function：

 var $formGroup = $(this).parent().closest('.form-group'), $siblings = $formGroup.siblings('.form-group.added'); $formGroup.remove(); $siblings.each(function() { var index = $(this).index() + 1, $label = $(this).find('label.control-label'), labelValNew = $label.text().replace(/\d/, index); $label.text(labelValNew); }); 

看到这个更新的小提琴

Answer 3

请看这个更新的小提琴
为你的答案div添加一个额外的类名
并始终删除最后一个答案。

$('.answer:last').remove();

否则，您将必须循环回答并使用正确的值重绘它们。

另外你可以看一下angularjs或knockout并使用一个可观察的。