Dynamisch erzeugte Felder mit jQuery werden sofort gelöscht - sie sollten einzeln gelöscht werden

Question

Ich mache einen Fragebogen, für den ich HTML über jQuery erzeuge. Unten ist der Code von dem, was ich bisher gemacht habe.

Ich füge Fragen in .add-question Klasse an. Ich habe bei jedem Klick einen Zählerwert zugewiesen. Es hat two types: Text und Mehrfachauswahl. Wenn ich den Typ in Multiple Choice ändere, sollte es einen Link von add choice geben. Beim Klicken auf add choice sollte ein neues Eingabefeld zusammen mit delete choice link generiert werden.

Hinzufügen einer Frage funktioniert gut. Wenn ich jedoch zwei Fragen gleichzeitig erzeuge, dann den Typ in multiple choice ändern und dann weitere fields hinzufügen, beginnt jQuery mit dem Hinzufügen von input fields in beiden Fragen. Wenn ein Feld entfernt wird, werden auch alle mit dieser ID verknüpften Eingaben entfernt.

Textart

geänderten Typ Multiple Choice

Wahl entfernen, auf Entfernen Wahl klicken Sie Fragen 2 der Eingabe auch

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

EDIT:

Ich habe meinen Code fügen Sie bitte Geige es überprüfen und mir sagen, wie kann ich es besser machen?

JSfiddle

Answer 1

Ändern .insertBefore (this); anstelle von .insertBefore ('. btn-choice'); Lösen Sie die Auswahl für alle Fragen mit mehreren Möglichkeiten. Aber immer noch gibt es ein Problem. Es ist das Gegenproblem, es ist das gleiche aller Multiple-Choice-Fragen. Und wir können das lösen, indem wir ein Attribut "data-choiceCount" für alle 'btn-choice's hinzufügen. Dann können wir es für die Auswahl verwenden, wenn auf die btn-Auswahlschaltfläche geklickt wird.

Here fiddle is

geänderte Zeilen

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