Javascript 在div中隐藏较旧的内容

HTML代码如下所示-

<div id="myDiv" style="max-height:500px; overflow-y:auto;margin-top: 15px" >
    <div id="myInnerDiv" style="display:none;border:1px solid black;">
        <span class='myLine' >data1</span>
        <span class='myLine' >data2</span>
        <span class='myLine' >data3</span>
        <span class='myLine' >data4</span>
        <span class='myLine' >data5</span>
    </div>
</div>

然后

data1

应该被移除或隐藏。有什么建议吗

if($('.myLine').length() > 5 ) {

  $('.myLine').first().remove();

}

差不多吧。或者可以向.first（）中添加一个新类并将其隐藏

if($('.myLine').length() > 5 ) {

  $('.myLine').first().replaceWith(yourData);

}

---

差不多吧。或者您可以向.first（）中添加一个新类并将其隐藏。

您可以使用类似的方法。使用此解决方案，您不会因为“旧”行而丢失内容

if($('.myLine').length() > 5 ) {

  $('.myLine').first().replaceWith(yourData);

}

您可能应该使用

div

而不是

span

，因为span已经将

display:inline block

作为标准，因此不会给您一个新行

//编辑 第一个被隐藏，新的被追加

$（'.addLine'）。单击（函数（）{
$（'#myInnerDiv'）.append（'test'）；
if（$（'#myInnerDiv'）.find（'.myLine'）.length>5）{
$（'#myInnerDiv'）.find（'.myLine'）.not（'.hidden'）.first（）.addClass（'hidden'）；
}
});
。隐藏{
显示：无；
}

数据1
数据2
数据3
数据4
数据5
添加行
您可以使用类似的内容。使用此解决方案，您不会因为“旧”行而丢失内容

您可能应该使用
div
而不是
span
，因为span已经将
display:inline block
作为标准，因此不会给您一个新行

//编辑
第一个被隐藏，新的被追加
$（'.addLine'）。单击（函数（）{
$（'#myInnerDiv'）.append（'test'）；
if（$（'#myInnerDiv'）.find（'.myLine'）.length>5）{
$（'#myInnerDiv'）.find（'.myLine'）.not（'.hidden'）.first（）.addClass（'hidden'）；
}
});
。隐藏{
显示：无；
}

数据1
数据2
数据3
数据4
数据5
添加行
您可以自动将div（myDiv）滚动到底部

这样最后的值将自动可见

        <script>
        $(document).ready(function(){

            var objDiv = $('$myDiv');
            objDiv.scrollTop = objDiv.scrollHeight;

        });
        <script>


$（文档）.ready（函数（）{
var objDiv=$（“$myDiv”）；
objDiv.scrollTop=objDiv.scrollHeight；
});
您可以自动将div（myDiv）滚动到底部

这样最后的值将自动可见

        <script>
        $(document).ready(function(){

            var objDiv = $('$myDiv');
            objDiv.scrollTop = objDiv.scrollHeight;

        });
        <script>


$（文档）.ready（函数（）{
var objDiv=$（“$myDiv”）；
objDiv.scrollTop=objDiv.scrollHeight；
});
很有趣。我会试试的。很有趣。好的方法，但我必须动态创建
yourData
。好的方法，但我必须动态创建
yourData
。好的方法。我想在底部追加。所以我想我必须相应地修改你们的代码，使其出现在底部，并使第一个隐藏。这是个好方法。我想在底部追加。所以我想我必须相应地修改代码，使其在底部出现，并使第一个隐藏。