Javascript/Jqueryを使用してラジオボタンの入力フィールドを動的に削除することはできません

Question

助けが必要です。私は複数のテキストエリア、ラジオボタンフィールドを作成してプラスボタンをクリックしてリストをドロップダウンしています。ユーザーが最後にマイナスボタンをクリックすると、すべての3タイプのアイテムが削除されますが、そのようには起こりません。私は以下のコードを説明しています。

<input name="no_of_question" id="ques" class="form-control" placeholder="no of question" type="text"> 
<label>Questions</label> 
<input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" onClick="addQuestionField();"> 
<input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" onClick="deleteQuestionField();"> 
<div id="container"> 
    <div class="row"> 
     <div class="col-md-3"> 
     <div class="form-group"> 
      <textarea class="form-control" name="questions0" id="questions0" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea> 
     </div> 
     </div> 
     <div class="col-md-9"> 
     <div style="margin-top:37px;"> 
      <div style="float:left; margin-right:10px;"> 
      <input type="radio" name="answer_type0" id="answer_type0" onClick="selectScale(this.value,'0');"> 
      </div> 
      <div style="float:left; margin-top:-10px;display:none;" id="scaleid0"> 
      <select class="form-control" id="nscale0" name="noofscale0"> 
       <option value="">Select Answer Type</option> 
       <option value="1">Cuttuck</option> 
       <option value="1">BBSR</option> 
      </select> 
      </div> 
     </div> 
</div> 

Javascriptコードを以下に示します。

function addQuestionField(){ 
    var get =$("#ques").val(); 
    if(get===null || get===''){ 
     alert('Please add no of questions'); 
    }else{ 
     for(var i=1;i<get;i++){ 
     $('#container').append('<div class="row"><div class="col-md-3"><div class="form-group"><textarea class="form-control" name="questions'+ i +'" id="questions'+ i +'" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea></div></div> <div class="col-md-9" ><div style="margin-top:37px;"><div style="float:left; margin-right:10px;"> <input type="radio" name="answer_type'+i+'" id="answer_type0" onClick="selectScale(this.value,'+i+');"></div><div style="float:left; margin-top:-10px;display:none;" id="scaleid'+i+'"><select class="form-control" id="nscale'+i+'" name="noofscale'+i+'"><option value="">Select Answer Type</option><?php foreach($feeddatascale as $v){ ?><option value="1" >Cuttuck</option><?php } ?></select></div><div style="clear:both;"></div></div></div><div>'); 
     } 
    } 
} 
function deleteQuestionField(){ 
    var get =$("#ques").val(); 
    var textareas = $('#container textarea'); 

    if (textareas.length !== 0) { 
    textareas.last().remove(); 

    $('#ques').val(textareas.length - 1); 
    } 
} 

ここで、-ボタンをクリックすると、最後のテキスト領域のみが削除されます。しかし、私はそれぞれのラジオボタンを削除し、テキストエリアでリスト（if exist）をドロップダウンする必要があります。ここに合計plunkrコードがあります。私を助けてください。

Answer 1

必ずテンプレートで、これを試してみてくださいhtmlコード

$('#container').append('<div class="row dyn"> 

https://plnkr.co/edit/kBWcs6zUmMndB3RwXMcF?p=preview

Answer 2

のブロックを隔離するためのラッパーセレクタを使用しようと、すべて一緒に設定された入力のためのラッパークラスを追加および削除にそれを削除し、あなたのdivを正しく閉じてください私はあなたが1つのdivの終了タグを置くことを忘れたと思う。

function deleteQuestionField(){ 
     var get =$("#ques").val(); 
     var textareas = $('#container').find('textarea'); 
     if (textareas.length !== 0) { 
     $('#container div.row:last-child').remove(); 

     $('#ques').val(textareas.length - 1); 
     } 
    } 

Answer 3

あなたが動的に追加し、テキストエリア、ラジオボタンとドロップダウンリストが含まれている最後の行を削除することができます。

function deleteQuestionField(){ 
    $("#container>row").last().remove();  
} 

Answer 4

これは私のために働いた

、

HTML：

<input name="no_of_question" id="ques" class="form-control" placeholder="no of question" type="text"> 
<label>Questions</label> 
<input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+"> 
<input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-"> 
<div id="container"> 

</div> 

JS（jQueryの）：

$(document).ready(function(){ 
$('#plus').click(function(){ 
    var get =$("#ques").val(); 
    if(get===null || get===''){ 
     alert('Please add no of questions'); 
    }else{ 
     for(var i=1;i<=get;i++){ 
     $('#container').append('<div class="row"> <div class="col-md-9" ><div style="margin-top:37px;"><div style="float:left; margin-right:10px;"> <input type="radio" name="answer_type'+i+'" id="answer_type0" onClick="selectScale(this.value,'+i+');"></div><div style="float:left; margin-top:-10px;display:none;" id="scaleid'+i+'"><select class="form-control" id="nscale'+i+'" name="noofscale'+i+'"><option value="">Select Answer Type</option><?php foreach($feeddatascale as $v){ ?><option value="1" >Cuttuck</option><?php } ?></select></div><div class="col-md-3"><div class="form-group"><textarea class="form-control" name="questions'+ i +'" id="questions'+ i +'" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea></div></div><div style="clear:both;"></div></div></div><div>'); 
     } 
    } 
}); 
$('#minus').click(function(){ 
    var get =$("#ques").val(); 
    var textareas = $('#container textarea'); 
    var radiobtns = $('#container input'); 

    if (textareas.length !== 0) { 
     textareas.last().remove(); 
     radiobtns.last().remove(); 

    $('#ques').val(textareas.length - 1); 
    } 
}); 
}); 

はjsfiddle