jQueryを使用して動的に作成されたフィールドは一度に削除されます.1つずつ削除する必要があります。

Question

jQueryを通じてHTMLを生成するアンケートを作成しています。以下は私がこれまで行ってきたことのコードです。

私は.add-questionクラスに質問を追加しています。私はクリックごとにカウンター値を割り当てました。それはtwo types：テキストと多肢選択です。タイプをの複数選択に変更すると、add choiceのリンクが必要です。 add choiceをクリックすると、新しい入力フィールドがdelete choice linkと一緒に生成されます。

質問を1つ追加するとうまくいきます。しかし、一度に2つの質問を生成したら、タイプをmultiple choiceに変更し、さらにfieldsを追加すると、jQueryは両方の質問にinput fieldsを追加し始めます。フィールドを削除すると、そのIDに関連付けられたすべての入力も削除されます。

テキストタイプ

変更されたタイプの複数の選択肢

に、それはまた、質問に

を2の入力を削除していると削除]をクリックし選択に、選択肢を削除します0

$(document).ready(function() { 
    $('.btn-success').hide(); 
    var counter = 0; 
    var choice = 1; 
    $('.btn-add').on('click', function(){ 
     counter++; 
     $('.add-question').append('<br>' + '<div class="question_'+counter+'">'+ 
       '<div class="form-group">'+ 
      '<label class="control-label col-md-4" for="question-type">Question Type:</label>'+ 
      '<div class="col-md-4">'+ 
       '<select class="form-control question-type" id="'+counter+'">'+ 
        '<option value="text">Text</option>'+ 
        '<option value="multiple" id="'+counter+'">Multiple Choice</option>'+ 
       '</select>'+ 
      '</div>'+ 
      '</div>'+ 
     '<div class="form-group">'+ 
      '<label class="control-label col-md-4" for="question">Enter Question:</label>'+ 
      '<div class="col-md-4">'+ 
       '<input type="text" name="question[]" class="form-control" />'+ 
      '</div>'+ 
      '<div class="col-md-4">'+ 
       '<button type="button" class="btn btn-danger btn-delete " id="'+counter+'">Delete Question</button>'+ 
      '</div>'+ 
     '</div>'+ 
     '<div class="form-group txt-answer'+counter+'">'+ 
      '<label class="control-label col-md-4" for="answer">Answer:</label>'+ 
      '<div class="col-md-4">'+ 
       '<input type="text" name="answer[]" id="answer" class="form-control" />'+ 
      '</div>'+ 
     '</div>'+ 
     '<hr>'+ 
     '<div>'+ 
     '</div>' 
     ); 
    $('.btn-success').show(); 
    }); 

    $(document).on('click', '.btn-delete' , function() { 
     var buttonId = $(this).attr("id"); 
     $('.question_'+buttonId).remove(); 
     if($('.question_'+buttonId) === "undefined") { 
     $('.btn-success').hide(); 
    } 
    }); 


    $(document).on('change', '.question-type' , function(){ 
//  var value = $('#question-type').val(); 
     var value = $(this).attr("id"); 

     if($(this).val() === "multiple") { 
      $('.txt-answer'+value).replaceWith('<div class="form-group remove-choice'+choice+'">'+  
      '<label class="control-label col-md-4" for="choice">Choice '+choice+':</label>'+ 
      '<div class="col-md-4">'+ 
       '<input type="text" name="choice[]" id="choice" class="form-control" />'+ 
      '</div>'+ 
      '<div class="col-md-2 add-choice">'+ 
      '<label class="" for="choice"></label>'+ 
       '<input type="checkbox" name="flag[]" id="flag" /> Correct?'+ 
       '<button type="button" class="btn btn-link btn-remove" id="'+choice+'">Delete Choice</button>'+ 
      '</div>'+ 
      '<button type ="button" class="btn btn-link col-md-offset-4 btn-choice">Add Choice</button>'+ 
     '</div>' 
     ); 
     } else if($(this).val() === "text") { 
      var choiceId = $(this).attr("id"); 
      $('.remove-choice'+choiceId).replaceWith('<div class="form-group">'+ 
      '<label class="control-label col-md-4" for="answer">Answer:</label>'+ 
      '<div class="col-md-4">'+ 
       '<input type="text" name="answer[]" id="answer" class="form-control" />'+ 
      '</div>'+ 
     '</div>'); 
     } 
    }); 

    $(document).on('click', '.btn-choice', function() { 
    choice++; 
     $('<div class="form-group remove-choice'+choice+'">'+  
      '<label class="control-label col-md-4" for="choice">Choice '+choice+':</label>'+ 
      '<div class="col-md-4">'+ 
       '<input type="text" name="choice[]" id="choice" class="form-control" />'+ 
      '</div>'+ 
      '<div class="col-md-2">'+ 
      '<label class="" for="choice"></label>'+ 
       '<input type="checkbox" name="flag[]" id="flag'+choice+'" /> Correct?'+ 
       '<button type="button" class="btn btn-link btn-remove" id="'+choice+'">Delete Choice</button>'+ 
      '</div>'+ 
      '<br>'+ 
     '</div>').insertBefore('.btn-choice'); 
    }); 

    $(document).on('click', '.btn-remove', function() { 
     var buttonId = $(this).attr("id"); 
     $('.remove-choice'+buttonId).remove(); 
    }); 
}); 

編集：私はそれをチェックして、私はそれよりよく作ることができる方法を教えてくださいいじるための私のコードを追加してい

？

JSfiddle

Answer 1

.insertBefore（これを）変更します。 .insertBefore（ '.btn-choice'）の代わりに。複数の選択肢のすべての質問に選択肢を追加することを解決します。しかし、まだ問題があります。それは対抗問題であり、複数選択問題のすべてが同じです。これを解決して、すべての「btn-choice」属性に「data-choiceCount」という属性を追加することができます。次に、btn-choiceボタンをクリックしたときに選択カウントに使用できます。

Here fiddle is

変更された行

$(document).on('click', '.btn-choice', function() { 
    var choice = parseInt($(this).attr('data-choiceCount')) + 1; 
    $(this).attr('data-choiceCount', choice); 
    $('<div class="form-group remove-choice'+choice+'">'+  
     '<label class="control-label col-md-4" for="choice">Choice '+choice+':</label>'+ 
     '<div class="col-md-4">'+ 
      '<input type="text" name="choice[]" id="choice" class="form-control" />'+ 
     '</div>'+ 
     '<div class="col-md-2">'+ 
     '<label class="" for="choice"></label>'+ 
      '<input type="checkbox" name="flag[]" id="flag'+choice+'" /> Correct?'+ 
      '<button type="button" class="btn btn-link btn-remove" id="'+choice+'">Delete Choice</button>'+ 
     '</div>'+ 
     '<br>'+ 
    '</div>').insertBefore(this); 
    });