subhra subhra - 6 months ago 6
Javascript Question

How to remove the last field depends on other field value using Javascript/Jquery

I need one help. I need to delete some field which has added as per other input field value.Let me to explain my code.

<div style="width:24%; float:left; padding:10px;">No of questions :
<input name="question" id="ques" class="form-control" placeholder="no of question" value="<?php if($_REQUEST['edit']) { echo $getcustomerobj->no_of_question; } else { echo $_REQUEST['no_of_question']; } ?>" type="text" onkeypress="return isNumberKey(event)">
<div id="err_msg_name" style="font-size:12px; color:#FF0000; text-align: center;"></div>
</div>
<div style="width:24%; float:left; padding:10px;" id="container">questions :
<textarea class="form-control" name="questions0" id="questions" placeholder="Questions" style="background:#FFFFFF;" rows="2"><?php if($_REQUEST['edit']) { echo $getcustomerobj->questions; } else { echo $_REQUEST['questions']; } ?></textarea>
</div>
<div style="float:left;margin-top:37px;">
<input type="button" class="btn btn-success" name="plus" id="plus" value="+" onClick="addQuestionField();"><input type="button" class="btn btn-danger" name="minus" id="minus" value="-" onClick="deleteQuestionField();">
</div>


my javascript part is given below.

function addQuestionField(){
var get =$("#ques").val();
if(get==null || get==''){
alert('Please add no of questions');
}else{
var counter = 0;
if (counter > 0){
return;
}else{
counter++;
for(var i=1;i<get;i++){
$('#container').append(' <textarea class="form-control" name="questions'+ i +'" id="questions" placeholder="Questions" style="background:#FFFFFF;" rows="2"><?php if($_REQUEST['edit']) { echo $getcustomerobj->questions; } else { echo $_REQUEST['questions']; } ?></textarea>');
}
}
}
}


Here suppose user has inserted
5
inside
No of questions
field and clicked on plus button then five textarea are creating . Here i have also
minus
button and i need if user will click on the minus button the very last text area will delete and accordingly the
No of questions
field will change similarly if the
No of questions
field value is changing accordingly it should create the text area dynamically.Please help me.

Answer

Your deleteQuestionField() function can be something simple like this:

function deleteQuestionField() {
    $('#container textarea:last-child').remove();
}

Or you can use .last(), if you don't like the css's :last-child selector.

If you want to update the No of questions field, try this:

function deleteQuestionField() {
    var textareas = $('#container textarea');

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

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

Here's a working example.

window.addQuestionField = function () {
    var get =$("#ques").val();
    if(get==null || get==''){
        alert('Please add no of questions');
    }else{
        var counter = 0;
        if (counter > 0){
            return;
        }else{
             counter++;
             for(var i=1;i<=get;i++){
                 $('#container').append(' <textarea class="form-control" name="questions'+ i +'" id="questions" placeholder="Questions"  style="background:#FFFFFF;" rows="2"></textarea>');
             }
        }
    }
}

window.deleteQuestionField = function () {
	var textareas = $('#container textarea');
  
  if (textareas.length !== 0) {
    textareas.last().remove();

    $('#ques').val(textareas.length - 1);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ques" value="">
<input type="submit" onClick="addQuestionField();" value="Add">
<input type="submit" onClick="deleteQuestionField();" value="Remove">

<div id="container">
  
</div>