動態刪除輸入字段

我想這個問題以前已經問過，但我無法在論壇上找到答案。我有一個有問題的表格和5個可能的答案。如果用戶想添加答案，他點擊「添加答案」。這工作正常。動態刪除輸入字段

然而，當用戶將所有可能的響應，並決定取消回覆4，然後添加一個響應，響應計數器不再遵循並且可以有很多次的答案5.

如何爲always按時間順序受到尊重？

的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

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 here

一個很好的總結與圖片

enter image description here

來源

2014-12-20 Zl3n

您需要重新號碼你的答案你刪除一個後。

我包了回答數字在span

<span class="counter"><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/

來源

2014-12-20 12:38:26

就是這樣！謝謝：） – Zl3n

請參閱此更新fiddle
將額外的類名稱添加到您的答案div
並始終刪除最後一個答案。

<div class="form-group answer" data-option="' + (x+2) + '">

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

否則，你將不得不遍歷所有的答案和正確的值重繪他們。

另外，你可以看看angularjs或knockout並使用可觀察。

來源

2014-12-20 12:29:35 HoXa

嗨，這是更好，但這不是我正在尋找的。的確，如果用戶添加「答案5」並決定刪除答案4，這就是答案5誰將被刪除...... – Zl3n

那麼你可以修改你的刪除功能：

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); 
});

看到這個updated fiddle

來源

2014-12-20 12:38:08 Ferret

動態刪除輸入字段

回答

相關問題