0

The input name (comment_) must be maximum to 20. It means that If I click 20 times Add comment and remove 5 comments and add 5 again, then should be 16,17,18,19,20 (not 21,22,23,24,25). How I can repair that?

I've tried so far:

var FieldCount = 0;
var x = $("#i_comment").length;
$('#add_comment_box').click(function(e) {
  if (x <= 21) {
    FieldCount++;
    $('#i_comment').append('<div class="in-section-50"><input type="text" class="in-75 mb-20" name="comment_' + FieldCount + '" id="field_' + 0 + '" required/> <a href="#" class="removeclass">Remove comment</a></div>');
    x++;
    $('#add_comment').show();
    $('add_comment_box').html('Add new comment');
    if (x == 21) {
      $('#add_comment').hide()
    }
  }
  return !1
});
$('body').on('click', '.removeclass', function(e) {
  if (x > 1) {
    $(this).parent('div').remove();
    x--;
    $('#add_comment').show();
    $('add_comment_box').html('Add new comment')
  }
  return !1
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='add_comment_box' class='in-section-100'>
  <a id='add_comment' class='btn_add_c_a'>Add comment</a>
</div>
<div class='big-section d_b_i' id='i_comment'></div>

Improve this question
7
  • And what is the problem with your solution? What works? What doesn't work? Any errors in the console? Commented Aug 25, 2018 at 12:22
  • @Andreas See the question again. Commented Aug 25, 2018 at 12:26
  • 1
    FieldCount is not initialized. var x = $("#i_comment").length; is a complicated way for var x = 1; Ids have to be unique (id="field_' + 0 + '"). Commented Aug 25, 2018 at 12:26
  • 1
    The problem with FieldCount is visible in the console: Uncaught ReferenceError: FieldCount is not defined (just run your code in the snippet). After fixing that problem your code works -> Vote to close as off-topic because this question was caused by a problem that can no longer be reproduced or a simple typographical error. Commented Aug 25, 2018 at 12:30
  • It seems you sometimes are using x and sometimes Fieldcount for the same purpose. I think the thing works if you remove x and use fieldcount instead. Commented Aug 25, 2018 at 12:36

2 Answers 2

Reset to default
1

The simple logic i would suggest is, In your Add comment handler just add input with name as "comment_" + ($("#i_comment > div").length + 1). And then in remove handler go over each input and reset their count from 1 to 20.

To put simply, Here is the idea,

$('#add_comment_box').click(function(e) {
    if( $("#i_comment > div").length <= 20) {
      $('#i_comment').append('<div class="in-section-50 input-div"><input type="text" class="in-75 mb-20" name="comment_' + ($("#i_comment > div").length + 1) + '" required/> <a href="#" class="removeclass">Remove comment</a></div>');
    }
    return !1
});

$('body').on('click', '.removeclass', function(e) {
    if ($("#i_comment > div").length > 1) {
        $(this).parent('div').remove();
        updateCount();
    }
    return !1
});

function updateCount() {
    $("#i_comment > div").each(function(key, value) {
        $(this).find('input').attr('name', 'comment_'+ (key + 1));
    });
}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I don't think TO wants 20 input fields with name="comment_2"
@Andreas After each addition this $("#i_comment").length + 1 will return next value. so when you first click you will get 2, in the next click you will get 3.
$("#i_comment").length + 1 will always be 2
I think CodeThing means $("#i_comment").children().length + 1
0

Based on the suggestion above, I think this is what you are looking for:

$('#add_comment_box').click(function(e){
  console.log(e);
  comLength=$("#i_comment").children().length+1;
  if (comLength <= 20) {
   console.log(comLength) 
    
    $('#i_comment').append('<div class="in-section-50"><input type="text" class="in-75 mb-20" name="comment_' + comLength + '" id="field_' + comLength + '" required/> <a href="#" class="removeclass">Remove comment</a></div>');

    $('#add_comment').show();
    $('add_comment_box').html('Add new comment');
    if (comLength >= 21) {
      $('#add_comment').hide()
    }
  }
  return !1
});
$('body').on('click', '.removeclass', function(e){

  if ($("#i_comment").children().length >= 1) {
    $(this).parent('div').remove();
    $('#add_comment').show();
    $('add_comment_box').html('Add new comment')
  }
  return !1
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='add_comment_box' class='in-section-100'>
  <a id='add_comment' class='btn_add_c_a'>Add comment</a>
</div>
<div class='big-section d_b_i' id='i_comment'></div>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.