Question

how to setting display:none to some div after I delete the text from textarea

i have this

$("#par02par04text textarea").keyup(function() {
    $('#par02TextComments.comments').css('display','table-cell');
    $('#par02LabelComments.comments').css('display','table-cell');
});

which setting display to the some element after I start typing in textarea, i want to invert this when I delete the text from textarea i want to setup display: none

i wrote this

$("#par01par04text textarea").keyup(function() {
    var n = $("td#par01TextComments").length;
    if (n > 0) {
        $('#par01TextComments.comments').css('display','table-cell');
        $('#par01LabelComments.comments').css('display','table-cell');
    }
    else if (n == 0){
        $('#par01TextComments.comments').css('display','none');
        $('#par01LabelComments.comments').css('display','none');
    }
}); 

but nothing happens

Answer 1

When you do $("td#par01TextComments").length you are actually getting the length of the jquery object, not the value of the element you queried.

Get first the value with .val() of the textarea and check the length

$("#par01par04text textarea").keyup(function() {
    var n = $(this).val().length;
    ...
});

Note:

You should not preprend an ID selector with the tagname (ex: td#someID) as it reduces its efficiency.

The ID selector normally uses the native javascript function getElementById(). By prepending with the tagname, jquery is not able to use the native function and any other way then getElementById is less efficient.