动态删除输入字段 [英] Remove inputs fields dynamically

问题描述

我想这个问题已经被问过了，但是我在论坛上找不到答案.我有一个问题表格和5个可能的答案.如果用户要添加答案，则单击添加答案".效果很好.

I guess this question has been asked before but I can't find the answer on the forums. I have a form with a question and a 5 possible answers. If the user wants to add an answer, he clicks on "Add an answer." This works fine.

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

However, when the user adds all the possible responses and decides to cancel reply 4, then add a response, the response counter no longer follows and there can be many times the answer 5.

如何始终遵守时间顺序?

How to either always chronological order is respected?

HTML

<div class="panel-body">
 <form class="form-horizontal left-label">
    <div class="form-group">
        <label class="control-label col-lg-2">Question</label>
        <div class="col-lg-5">
            <input class="form-control" type="text">
            </div>
        </div>
        <div class="input_fields_wrap">
            <div class="form-group" style="margin-top:40px;">
                <label class="control-label col-lg-2">Answer 1</label>
                <div class="col-lg-5">
                    <input class="form-control" type="text" name="mytext[]">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2">Answer 2</label>
                  <div class="col-lg-5">
                    <input class="form-control" type="text" name="mytext[]">
                  </div>
                </div>
             </div>

             <div class="form-group">
               <div class="col-lg-offset-2 col-lg-10">
                 <a class="btn btn-med gray-bg add_field_button" href="#">Add an answer</a> <span class="rep_possible"></span>
             </div>
       </div>
     </form>
   </div>

还有javascript

And the 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('<div class="form-group" data-option="' + (x+2) + '"><label class="control-label col-lg-2">Réponse ' + (x+2) + '</label><div class="col-lg-5"><input class="form-control" type="text" name="mytext[]"></div><div class="col-lg-1"><a class="btn btn-med btn-danger remove_field" data-toggle="tooltip" data-placement="bottom" title="Supprimer cette réponse" title="Supprimer cette réponse" href="#">X</a></div></div>');
    }
});

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

带有图片的好摘要

推荐答案

删除答案后，您需要重新编号.

You need to re-number your answers after you delete one.

我将答案号码包裹在span

<span class="counter"><span>

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

and then changed your add and remove handlers to call the following function

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/

这篇关于动态删除输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！