Javascript 动态添加内容时从底部隐藏html元素

我正在开发一个评论提要。默认情况下，我将隐藏4个以上的所有注释。 如果有更多的4条评论，并且我已经点击了ShowMore锚，那么最多会显示4条评论。我的问题是，如果我现在动态添加更多的注释，CSS将隐藏在feed的中间。添加注释时，具有第四个位置的注释将隐藏。但是，当您单击锚时显示的所有其他注释仍在显示。我想要的是：在页面加载时只显示四条注释。如果在单击锚之前添加了注释，则隐藏第四条注释并在顶部显示新注释（正在工作）。如果单击锚定（无论单击多少次），则隐藏当前显示的最后一条注释，并在顶部显示新注释。下面我有一个工作片段。我希望我能让别人明白我的意思

var\u divNum=jQuery（'div.commentsWrapper>div'）.length；
如果（_divNum>4）{
$（'showMoreAnchorWrapper'）.fadeIn（300）；
}
jQuery（文档）.on（'click'，'#showMoreAnchor'，函数（）{
jQuery（'div.commentsWrapper>div:hidden'）.slice（0,4）.slideDown（300）；
if（jQuery（'div.commentsWrapper>div'）.length==jQuery（'div.commentsWrapper>div:visible'）.length）{
jQuery（“#showMoreAnchor”）.fadeOut（300）；
}
});
jQuery（文档）.on（'click'，“#postButton”），函数（e）{
var textAreaContent=jQuery（“#textAreaInput”）.val（）.trim（）；
var html=“Admin”+textAreaContent+”；
jQuery（html）.prependTo（“.commentsWrapper”）.hide（）.slideDown（）；；
var_divNum=jQuery（'div.commentsWrapper>div'）。长度；
如果（_divNum>4）{
jQuery（'.showMoreAnchorWrapper'）.fadeIn（300）；
}
});
.globalWrapper{
身高：50%；
宽度：50%；
边缘底部：15px；
左边距：10px；
}
.说唱歌手{
垫底：10px；
填充顶部：10px；
边界半径：5px；
背景色：#EBEDEF；
}
.评论区{
填充物：5px 5px 5px；
背景色：#D5D8DC；
边际上限：0px；
边框左下半径：5px；
边框右下半径：5px；
字体系列：“Segoe UI半光”、“Segoe UI”、“Segoe”、Tahoma、Helvetica、Arial、无衬线字体；
字号：1.15em；
换行：打断单词
}
titleStyle先生{
左侧填充：8px；
背景色：#FBF1E7；
边缘顶部：10px；
垫底：2件；
填充顶部：6px；
边框底部：1px纯色灰色；
}
div.commentsWrapper>div:n个孩子（1）>div.titleStyle{
边际上限：0px；
}
.输入包装器{
//背景色：#EBEDEF；
}
伊姆格瓦珀先生{
右边距：7px；
}
#文本区域输入{
宽度：100%；
最大宽度：97%；
高度：70像素；
;
调整大小：无；
文本对齐：左对齐；
左侧填充：0.4；
垫面：0.4；
垫底：0.4em；
右侧填充：0.6em；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
边缘底部：5px；
换行：打断单词
}
.钮扣敲击器{
左边距：10px；
高度：35px；
}
#postButton{
浮动：对；
}
.注释区域包装器{
左边距：自动；
右边距：自动；
宽度：94%；
}
.commentAreaWrapper:悬停{
/*盒影：10px 10px 10px*/
//底边：2倍纯色灰色；
//右边框：2倍纯色灰色；
//边界半径：5px；
}
div.commentsWrapper>div:n个孩子（n+5）{
显示：无；
}
.showMoreAnchorWrapper{
文本对齐：居中；
边缘顶部：10px；
显示：无；
}

测试
因拉格
管理
1.
管理
2.
管理
3.
管理
4.
Unisight管理员
5.
管理
6.
管理
7.
您可以将此代码添加到
#postButton
单击事件：

  // if more button was clicked      
  if (jQuery('div.commentsWrapper > div:visible').length > 4) {
    // hide the last visible element
    jQuery('div.commentsWrapper > div:visible:last').fadeOut(300);
  }

下面是一个正在运行的
用这个替换JS代码，并进行测试，我希望它能按照您的要求运行：）

var\u divNum=jQuery（'div.commentsWrapper>div'）.length；
如果（_divNum>4）{
$（'showMoreAnchorWrapper'）.fadeIn（300）；
}
jQuery（文档）.on（'click'，'#showMoreAnchor'，函数（）{
$（$（“#showMoreAnchor”）.parents（“.globalWrapper”）[0]）.children（.commentsWrapper”）.attr（“track”，true）；
jQuery（'div.commentsWrapper>div:hidden'）.slice（0,4）.slideDown（300）；
if（jQuery（'div.commentsWrapper>div'）.length==jQuery（'div.commentsWrapper>div:visible'）.length）{
jQuery（“#showMoreAnchor”）.fadeOut（300）；
}
});
jQuery（文档）.on（'click'，“#postButton”），函数（e）{
var textAreaContent=jQuery（“#textAreaInput”）.val（）.trim（）；
var html=“Admin”+textAreaContent+”；
jQuery（html）.prependTo（“.commentsWrapper”）.hide（）.slideDown（）；；
if（$（$（“#showMoreAnchor”）.parents（“.globalWrapper”）[0]）.children（.commentsWrapper”）.attr（“track”））{
var visibleBlocks=jQuery（'div.commentsWrapper>div:visible'）；
var lastBlock=visibleBlocks[visibleBlocks.length-1]；
$（lastBlock）.css（“显示”、“无”）
jQuery（“#showMoreAnchor”）.fadeIn（300）；
};
var_divNum=jQuery（'div.commentsWrapper>div'）。长度；
如果（_divNum>4）{
jQuery（'.showMoreAnchorWrapper'）.fadeIn（300）；
}
});
谢谢！！。做了一些调整，效果很好！
var _divNum = jQuery('div.commentsWrapper > div').length;
if (_divNum > 4) {
    $('.showMoreAnchorWrapper').fadeIn(300);
}

jQuery(document).on('click', '#showMoreAnchor', function() {
    $($("#showMoreAnchor").parents(".globalWrapper")[0]).children(".commentsWrapper").attr("track", true);
    jQuery('div.commentsWrapper > div:hidden').slice(0, 4).slideDown(300);
    if (jQuery('div.commentsWrapper > div').length === jQuery('div.commentsWrapper > div:visible').length) {

        jQuery('#showMoreAnchor').fadeOut(300);
    }
});

jQuery(document).on('click', "#postButton", function(e) {
    var textAreaContent = jQuery("#textAreaInput").val().trim();
    var html = "<div class='commentAreaWrapper'><div class='titleStyle'><span class='imgWrapper'><img class='' style='min-width:48px; min-height:48px; clip:rect(0px, 48px, 48px, 0px); max-width:48px' src='' alt='Admin'></span>Admin</div><div class='commentArea'>" + textAreaContent + "</div></div>";

    jQuery(html).prependTo(".commentsWrapper").hide().slideDown();;
    if ($($("#showMoreAnchor").parents(".globalWrapper")[0]).children(".commentsWrapper").attr("track")) {
        var visibleBlocks = jQuery('div.commentsWrapper > div:visible');
        var lastBlock = visibleBlocks[visibleBlocks.length - 1];
        $(lastBlock).css("display", "none")
        jQuery('#showMoreAnchor').fadeIn(300);
    };

    var _divNum = jQuery('div.commentsWrapper > div').length;
    if (_divNum > 4) {
        jQuery('.showMoreAnchorWrapper').fadeIn(300);
    }

});