javascript increment var not working

Question

i have this following script :

$(function() {
    var no_of_file = {{$image_counter}};

            $('#remove-file').click(function() {
                 no_of_file--;
            }); 

    if (no_of_file >= '5'){
        $("#dv1").hide();
        $("#imageLabel").hide();
    }else{              
        /* Append More Input Files */
        $('#anc_add_more').click(function() {
            no_of_file++;
            // alert(no_of_file);
            if(no_of_file < {{$role_pic_limit}})
            {
            $('#spn_inputs').append('<span><input type="file" name="myfile[] id="fileChooser" style="float:right;"/><a href="javascript:void(0);"  onclick="$(this).parent().remove();" style="float:left;" id="remove-file" >Remove</a><br/></span>');      

            }
            else{ 
                alert("You can upload only {{$role_pic_limit}} images");
            }
        }); 

    }
});

When i click "Add more file" i append more input and add +1 to no_of_file,my problem is when i try press Remove , it's should down -1 to no_of_file var , why it's not down increment ?

EDIT 15/02:

$(function() {
    var no_of_file = {{$image_counter}};

    if (no_of_file >= '5'){
        $("#dv1").hide();
        $("#imageLabel").hide();
    }else{              
        /* Append More Input Files */
        $('#anc_add_more').click(function() {
            no_of_file++;

            // alert(no_of_file);
            if(no_of_file < {{$role_pic_limit}})
            {
            $('#spn_inputs').append('<span><input type="file" name="myfile[]" class="fileChooser" style="float:right;"/><a href="javascript:void(0);"  onclick="$(this).parent().remove();" style="float:left;" id="remove-file" >Remove</a><br/></span>');      

            }
            else{ 
                alert("You can upload only {{$role_pic_limit}} images");
            }
        }); 

       $(document).on('click', '#remove-file,.anc_delete_more', function() { 
           no_of_file--;
        });

    }
});

This is now working , but decrease is not perfect is like that :

Click add more file +1
Click add more file +1
Click add more file +1
Click remove more file -1
Click remove more file nothing no decrease
Click remove more file nothing no decrease

jsfiddle:

https://jsfiddle.net/dgh3ndpm/2/

please view jsfiddle i have uploaded what i am using , and you can see clearly the issue , press add more 5 times , then press remove and then press add more again. thanks a lot

You can see how it's work not that good why ?

Answer 1

Use numbers, not string: (javascript automatically select what he thinks the varible is, it often confuse string instead of a number, divide by 1 guarantee we will have an 'int' varible... I changed it in your fiddle, and it works great...

edit: i just see, it only works for the first 'remove', so you clearly have an issue with the ID.

Use class selector instead.

edit: OK, some issues, but this is 100% working!! :P

var no_of_file = 0 / 1;
$(function () {
no_of_file = 0 / 1;
if (no_of_file >= 5) {
    $("#dv1").hide();
    $("#imageLabel").hide();
} else {
    /* Append More Input Files */
    $('.anc_add_more').click(function () {
        alert(no_of_file);
        if (no_of_file < 5) {
              no_of_file++;
            $('#spn_inputs').append('<span><input type="file" name="myfile[]" class="fileChooser" style="float:right;"/><a href="javascript:void(0);" style="float:left;" class="remove-file" >Remove</a><br/></span>');

        } else {
            alert("You can upload only 5 images");
        }
        initRemove();
    }

    );
  }
}

);

function initRemove() {
$(".remove-file").unbind('click');
$('.remove-file').click(function () {
    $(this).parent().remove();

    no_of_file--;
});
}

Answer 2

EDIT 15/02:

http://jsfiddle.net/ccn35w40/6/

I was using classes instead of IDs and was able to attach event to tags which ware added latter to DOM with these:

$(document).on('click', '.remove-file', function () {
  alert('remove one #files:'+no_of_file);

  $(this).parent().remove();
  no_of_file--;
});

Original post:

With the rest of HTML and working jsfiddle would be easier to debug. This will not be as answer as per say, more what steps you could do when you get issues with code like this.

var no_of_file = 2;

$('#remove-file').click(function() {
   no_of_file--;
   alert(no_of_file);
}); 

$('#add-file').click(function() {
  no_of_file++;
  alert(no_of_file);
}); 

http://jsfiddle.net/ccn35w40/1/

But it can work, add alert(); and console.log(); to see if the event is not triggered at all or it is triggered but the code doesn't do what you want. From that point you will know more which way to go when debugging it. The incrementing & decrementing by itself works, so the issue related to the rest of js.

You seam to do few things wrong, you try having onClick and jQuery event handler attached to it. In reality the jQuery will not be attached because it was called much sooner than the HTML tag poped into existence. And you have duplicate IDs. Decrements is not issue, it's not just called at all. The jQuery events are attached just to element that are existing at the moment of execution. If you will add another one later the event will not be added to it. To get rid of duplicate id you can use class instead of id and then use $('.remove-file').click()

Notice how the # changed to dot. The hashtag is for IDs and dot for classes.

Instead then you can do these don't have to be unique.

You can try using .live so the event listener will be added even for your fresh tags.

jQuery function not binding to newly added dom elements