추가시 마지막 상자를 숨기려면 어떻게합니까?

Question

HTML :

<button>Append</button> 
<div id="boxWrap"> 
    <div id="innerWrap"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div> 
</div> 
<input id="count" value=0></input> 

CSS :

.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%; 
} 

JQuery와 :

$('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" } ); 
    } 

}); 

나는 마지막 상자가 표시 할 페이지에 들어갈 수있는 표시 할 : 다른이 추가되지 않는 것도 할 때. 예 : 4 상자가 들어갈 수있는, 클릭 4 상자가 5 상자를 그 자리 클릭이 5 상자가 6 상자가 이것에 대한 이유는 그들이 결국 데이터를 저장할 것입니다 그 자리

소요 숨 깁니다 추가 소요 숨 깁니다 추가하고, 나는 그들이 사용자에 의해 닫힐 때 반대를 할 수 있고 싶다. 내 문제는 상자의 색인을 얻으려고하는 것입니다.

감사합니다.

사람들을 위해 편집 * ** * ** * ** * ** * ** * *

감사합니다 제이슨 P

사람 비슷한 목적을 가지고있다. 대답 :

$('#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(); 
    }); 

Answer 1

이 같은 마지막으로 볼 수있는 상자를 찾을 수 있어야합니다 :

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