有無論如何在html表的最後一行顯示隱藏的div

Question

我有一個html表。這裏是一個簡化的版本：

<table> 
     <tr> 
      <td><div style="display: none;" class="remove0">Remove Me</div></td> 
     </tr> 
     <tr> 
      <td><div style="display: none;" class="remove1">Remove Me</div></td> 
     </tr> 
     <tr> 
      <td><div class="remove2">Remove Me</div></td> 
     </tr> 
</table> 

我有一個JavaScript的點擊次數在最後一排刪除我和它使用刪除HTML行：

$(this).parents("tr:first").remove(); 

的問題是，如果我刪除了這最後行，我也希望「刪除我」文本現在顯示在第二行（現在是新的最後一行）。我將如何顯示這個div，以便動態顯示新的最後一行中的「刪除我」？

Answer 1

試試這個。讓所有的div都是同一個班級 - 從長遠來看，這將變得更加簡單。

<table> 
    <tr> 
     <td><div class="remove">Remove Me</div></td> 
    </tr> 
    <tr> 
     <td><div class="remove">Remove Me</div></td> 
    </tr> 
    <tr> 
     <td><div class="remove">Remove Me</div></td> 
    </tr> 
</table> 

而且此javascript：

$('.remove') 
    .click(function() { 
     var $tr = $(this).closest('tr'); 
     $tr 
      .prev() 
      .find('.remove') 
      .show() 
     ; 
     $tr.remove(); 
    }) 
    // hide all but the last one 
    .slice(0, -1).hide() 
;