Javascript 如何隐藏附加上的最后一个框？

HTML:

Jquery：

.box {
    width: 100px;
    height: 100px;
    background-color: #333333;
    margin: 5px;
    display: inline-block;
    position: relative;
}
#boxWrap {
    width: 100%;
     overflow-y: visible;
    height: 20px;

}
#innerWrap {
    white-space:nowrap;
    overflow-x: hidden;
    max-width: 100%;
}

$（“按钮”）。单击（函数（）{
var html=''；
$inWrap=$（“#innerWrap”）；
$inWrap.prepend（html）；
$lastBox=$inWrap.find（'.box'）；
var count=parseInt（$（'#count'）.val（），10）；
计数=计数+1；
警报（计数）；
$（'#count'）.val（count.toString（））；
var limit=$inWrap.width（）/110；
如果（110*计数>=$inWrap.width（））{
$lastBox.index（count-1）.css（{“display”：“none”}）；
}
});

我希望显示页面上最后一个可以容纳的框：追加另一个框时无。例子： 可以装4个盒子， 单击“附加” 第四盒生皮 5个盒子取而代之 单击“附加” 第五盒生皮 第六个盒子取而代之

原因是它们最终将存储数据，我希望在用户关闭它们时能够执行相反的操作。我的麻烦是想得到箱子的索引

谢谢大家!

编辑**************

谢谢你，杰森p

对于目标相似的人，回答：

$('button').click(function(){

    var html = '<div class="box"></div>';
    $inWrap = $('#innerWrap');
    $inWrap.prepend(html);
    $lastBox = $inWrap.find('.box');

    var count = parseInt( $('#count').val(), 10 );
    count = count+1;
    alert(count);
    $('#count').val(count.toString());
    var limit = $inWrap.width() / 110;
    if( 110*count >= $inWrap.width() ) {
        $lastBox.index(count-1).css( {"display": "none" }  );
    }

});

$（'#btn1'）。单击（函数（）{
var count=parseInt（$（'#count'）.val（），10）；
计数=计数+1；
var html=''；
$inWrap=$（“#innerWrap”）；
$inWrap.prepend（html）；
$lastBox=$inWrap.find（'.box'）；
$（'#count'）.val（count.toString（））；
var limit=$inWrap.width（）/110；
如果（110*计数>=$inWrap.width（））{
$（'#innerWrap.box:visible'）.last（）.hide（）；
}
});
$（'#btn2'）。单击（function（）{//希望隐藏的最后一个文件是第一个返回的文件，因此它是第一个显示为：none的文件
var count=parseInt（$（'#count'）.val（），10）-1；
$（'#count'）.val（count.toString（））；
$（'#innerWrap.box:visible'）.last（）.hide（）；
var limit=$inWrap.width（）/110；
如果（计数>限制）
$（'#innerWrap.box:hidden'）.first（）.show（）；
});

您应该能够找到最后一个可见框，如下所示：

$('#btn1').click(function(){

        var count = parseInt( $('#count').val(), 10 );
    count = count+1;
    var html = '<div class="box" id="' +count+ '"></div>';
    $inWrap = $('#innerWrap');
    $inWrap.prepend(html);
    $lastBox = $inWrap.find('.box');



    $('#count').val(count.toString());
    var limit = $inWrap.width() / 110;
    if( 110*count >= $inWrap.width() ) {
            $('#innerWrap .box:visible').last().hide();
        }

});
$('#btn2').click(function(){ // want the last one hidden to be first one back so it's the first one with display: none

    var count = parseInt( $('#count').val(), 10 ) - 1;
    $('#count').val(count.toString());
    $('#innerWrap .box:visible').last().hide();
    var limit = $inWrap.width() / 110;

    if(count > limit)
        $('#innerWrap .box:hidden').first().show();
    });

---

$（'#innerWrap.box:visible'）.last（）.css（{'display'：'none'}）？根据您的问题，我认为您可能正在寻找

$（“#innerWrap.box:hidden”）。首先（）

只是一个简短的提示，您可以使用

hide（）

和

show（）

。比设置css更详细。

$('#btn1').click(function(){

        var count = parseInt( $('#count').val(), 10 );
    count = count+1;
    var html = '<div class="box" id="' +count+ '"></div>';
    $inWrap = $('#innerWrap');
    $inWrap.prepend(html);
    $lastBox = $inWrap.find('.box');



    $('#count').val(count.toString());
    var limit = $inWrap.width() / 110;
    if( 110*count >= $inWrap.width() ) {
            $('#innerWrap .box:visible').last().hide();
        }

});
$('#btn2').click(function(){ // want the last one hidden to be first one back so it's the first one with display: none

    var count = parseInt( $('#count').val(), 10 ) - 1;
    $('#count').val(count.toString());
    $('#innerWrap .box:visible').last().hide();
    var limit = $inWrap.width() / 110;

    if(count > limit)
        $('#innerWrap .box:hidden').first().show();
    });

$('#innerWrap .box:visible').last();