Question

I’ll begin with posting my javascript.

    $(document).on('click','.remove-single-inbox-message', function(e){
    e.preventDefault();
    var messageid = $(this).data('messageid');
    var messages = $("#number-messages").html();
    var messages = parseInt(messages, 10);
    messages--;
    $.ajax({
        type: 'POST',
        url: '?a=profile_message_delete',
        data: {
            "messageid" : messageid
        },
        success: function(){
            $('.table-row'+messageid).hide();
            if(messages == 0){
                $("#insert-message-indicator").html("");
            } else {
                $("#insert-message-indicator").html("<strong><small>"+messages+"</small></strong>&nbsp;<i class='icon-envelope icon-white' rel='tooltip' title='New messages available'></i>");
        }
        }
    });
});

The first decrementation works fine and the new number is displayed but the ones that follows it shows NaN. What am I doing wrong?

Answer 1

Possibility 1 :

You mixed the id while posting and "#number-messages" should be "#insert-message-indicator".

Replace

var messages = $("#number-messages").html();

with

var messages = $("#number-messages").text();

The "<strong><small>" you add makes the html unparsable as an integer.

Possibility 2 :

When doing $("#insert-message-indicator").html("<... you’re erasing the element with id #number-messages and so $("#number-messages").html() returns nothing usable at second iteration.

Warning :

var messages = $("#number-messages").html();
var messages = parseInt(messages, 10);

is the same than

var messages = $("#number-messages").html();
messages = parseInt(messages, 10);

You should probably have something like

var messages_text = $("#number-messages").html();
var messages = parseInt(messages_text, 10);

because your current code is confusing.