无论如何在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，它点击最后一行中的 Remove Me 并使用以下命令删除 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()
;