Javascript 使用jQuery动态创建的字段将立即删除—；应该逐一删除

我正在制作一份调查问卷，并通过jQuery为其生成HTML。下面是我迄今为止所做工作的代码

我在

中添加问题。在课堂上添加问题。我在每次单击时都指定了一个计数器值。它有两种类型

：文本和多选。当我将其类型更改为多选时，应该有一个

addchoice

链接。单击

添加选项

，将生成一个新的输入字段以及

删除选项链接

添加一个问题效果很好。但当我一次生成两个问题，然后将类型更改为多选，然后添加更多的字段时，jQuery开始在这两个问题中添加输入字段。删除字段后，它还会删除与该id关联的所有输入

文本类型

将类型更改为多项选择

移除选项，在移除选项上单击它已移除问题2的输入

$（文档）.ready（函数（）{
$（'.btn success'）.hide（）；
var计数器=0；
var选择=1；
$（'.btn add'）。在（'click'，function（）上{
计数器++；
$（'.add question'）。追加（'
'+''+
''+
'问题类型：'+
''+
''+
“文本”+
“多项选择”+
''+
''+
''+
''+
'输入问题：'+
''+
''+
''+
''+
“删除问题”+
''+
''+
''+
回答:+
''+
''+
''+
''+
“
”+
''+
''
);
$（'.btn success'）.show（）；
});
$（文档）.on（'click'，'.btn delete'，function（）{
var buttonId=$（this.attr（“id”）；
$（'.question'+buttonId）.remove（）；
如果（$（'.question_'+buttonId）=“未定义”）{
$（'.btn success'）.hide（）；
}
});
$（文档）.on（'change'，'）。问题类型，函数（）{
//var值=$（“#问题类型”）.val（）；
var值=$（this.attr（“id”）；
如果（$（this.val（）=“多个”）{
$（'.txt answer'+值）。替换为（'+
'选择'+选择+'：'+
''+
''+
''+
''+
''+
“对吗？”+
“删除选项”+
''+
“添加选择”+
''
);
}else if（$（this.val（）=“text”）{
var choiceId=$（this.attr（“id”）；
$（'.remove选项'+choiceId）.替换为（''+
回答:+
''+
''+
''+
'');
}
});
$（文档）.on（'click'，'.btn choice'，function（）{
选择++；
$(''+     
'选择'+选择+'：'+
''+
''+
''+
''+
''+
“对吗？”+
“删除选项”+
''+
“
”+
''）.insertBefore（'.btn-choice'）；
});
$（文档）.on（'click'，'.btn remove'，function（）{
var buttonId=$（this.attr（“id”）；
$（'.remove选项'+buttonId）.remove（）；
});
});

编辑：

我已经把我的代码添加到小提琴上了，请检查一下，告诉我怎样才能做得更好

更改.insertBefore（此）；而不是.insertBefore（'.btn choice'）；解决将选项添加到所有多项选择题中的问题。但仍然存在一个问题。这是反问题，所有的选择题都是一样的。我们可以为所有的btn选项添加一个属性“data choiceCount”来解决这个问题。然后我们可以在点击btn选项按钮时使用它来计算选项数

换行

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

$（文档）.on（'click'，'btn choice'，function（）{
var choice=parseInt（$（this）.attr（'data-choiceCount'））+1；
$（this.attr（'data-choiceCount'，choice）；
$(''+     
'选择'+选择+'：'+
''+
''+
''+
''+
''+
“对吗？”+
“删除选项”+
''+
“
”+
''）。在（本）之前插入；
});

好的，这是一个相当大的难题，没有一个有效的问题示例。我确实看到了一件有点有趣的事情，那就是问题类型的变化逻辑。您正在使用替换为逻辑中的全局

选项

变量。因此，如果我读对了这篇文章，如果你有10个问题区域，并且你更改了其中任何一个问题的类型，那么不管你更改了哪种问题类型，它都会使用最后一个选择值。这是我将

选择号

分配给它的相关类的真正问题，在此基础上，我正在处理事情。如何改进。您可以尝试将所需的上下文值作为数据-*字段放在元素上。例如数据选择=“#”。然后在事件中，您可以使用

$（element）获得上下文值。数据（'choice'）

除了使用

数据
元素之外，没有其他方法吗？@Taplar我添加了JSfiddle链接，请检查它。谢谢你，伙计！我们如何添加这个
数据choiceCount
然后使用它呢？我在js中创建btn选项的地方添加了这个属性。你可以在小提琴上看到。它位于if（$（this.val（）=“multiple”）中{scope.它是'Add Choice'，好的，当我添加一个
选项
和
删除
时，它工作正常。但是当我再次将类型从
多选
更改为文本时，它不工作。@Hakan SONMEZIt对您的原始小提琴不工作。所以这是另一个问题，也一定是另一个问题。现在一切都工作正常pt
下拉列表
可以在这里解决，那么为什么我们需要另一个问题？@Hakan SONMEZ
$(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); 
  });