如何动态删除这些元素

How do I dynamically remove these elements?

本文关键字：删除 元素 动态 何动态      更新时间：2023-09-26

如果元素存在超过一分钟，我正在尝试删除<li>元素。每个<li>都包含一个具有data-created-at属性的<a>元素。此created_at值存储在数据库中的服务器端。

当页面加载时，它显示来自数据库的记录。

<ul id="foobar">
  <% @foos.each do |foo| %>
    <li><%= link_to 'Foobar', '#', :'data-created-at' => foo.created_at.to_i %></li>
  <% end %>
</ul>

我的JS在删除<li>元素之前尝试比较系统(浏览器，而不是服务器(的时间：

$(document).ready(function(){
  setInterval(function() {
    $('#foobar a').each(function() {
      if(new Date().getTime() - $(this).data('created-at') >= 60000) {
        // It's been a minute
        $(this).parents('li').fadeOut()
      }
    });
  }, 10000); // 10 seconds
});

这是一个问题，因为我需要JS来动态删除任何<li>元素。由于Date().getTime()是基于浏览器/系统的。如果它处理从服务器呈现的created_at值，则有点不一致。

任何想法如何使它工作？

是的，@Lilina有一个很好的方法。将时间戳作为隐藏输入插入 HTML 文档的末尾。这可确保最后加载。然后添加一个文档就绪处理程序来计算浏览器时间和系统时间之间的偏移量(来自隐藏的输入标记(。将此偏移应用于所有创建于属性。

相关文章：