JQuery中的列表大小侦听器

我创建了一个动态列表，用户可以在其中添加和删除内容，对此列表有一个限制，即用户不能输入超过5的限制。每次用户在输入字段中单击“ Enter”时，检查列表大小是否达到最大值，因为我不希望收到警报，因此更改文本和字体颜色是最大的。另一方面，如果列表达到了极限，并且用户决定删除一些项目，那么这里的问题是我如何不断监视列表的大小以提供更好的反馈。有没有一种方法可以将eventListener放在（ul）上以检查其中有多少（li）？我正在使用JQuery来管理所有内容，我不介意其他语言的解决方案。

<input type="text" placeholder="Type here">
<ul class="sortable" id="inputList">
<?php
    for($i=0; $i<sizeof($serverItems); $i++)
        echo "<li>".$serverItems[$i]."<a class='close remove'>&times;</a></li>"; 
?>
</ul>
<span id="listLimit">(Max: 5)</span>

我的JQuery看起来像这样：

$('#input').keydown(function(e) {
    if(e.keyCode == 13 && $(this).val()!="") {
        if($('#inputList li').size()<5){
        var item = $(this).val();
        $('#inputList').append('<li>' + item + '<a class="close remove">&times;</a></li>');
        } else $('#listLimit').text('Maximum Limit Reached!').css('color','red');
        $(this).val('');
    }
});

这就是我如何删除点击项：

$(document).on('click', '.remove', function() {
    $(this).parent().remove();
});

请注意，“ close”类仅适用于CSS，“ remove”类是JQuery中用于删除该项的东西。