CODEWITHSUNDEEP
javascriptjqueryhtml
satya
satya

Reputation: 3560

Cannot delete the radio button input field dynamically using JavaScript/jQuery

I am creating multiple text area, radio button field and drop down list by click on a plus button. Here I need when user will click on minus button the last all 3 type item should delete but it's not happening like that.

Here is my code:

 <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>

The JavaScript code is given below.

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

Here when I am clicking - button only the last text area is removing. But I need to delete the respective radio button and drop down list(if exist) with text area. Here the total plunkr code is present.

Upvotes: 1

Views: 297

Answers (4)

Shintu Joseph
Shintu Joseph

Reputation: 962

Add a wrapper class for the input set all together and remove it on delete, always in templating, try to use wrapper selector to isolate blocks of html code

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

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

Upvotes: 3

Arun Thomas
Arun Thomas

Reputation: 845

This worked for me,

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

See the jsfiddle

Upvotes: 0

Rahul Malu
Rahul Malu

Reputation: 566

you can delete the last row which you added dynamically and which contains the textarea, radio button and dropdown list.

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

Upvotes: 1

Suraj
Suraj

Reputation: 168

Try this and please close your div properly i think You forgot to put one div closing tag. 

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

Upvotes: 1

Related Questions