Question

我正在使用.remove() jQuery方法在页面加载时从页面中删除元素。例如：

jQuery( document ).ready(function( $ ) {
    $( '.element').remove();
    // More code...
});

元素暂时在屏幕上闪烁，然后在加载页面后删除。如何确保.element不在屏幕上闪烁？我希望它能立即删除（在用户有机会看到它之前）？

我尝试过以下但是没有效果：

jQuery( '.element').remove();
jQuery( document ).ready(function( $ ) {

    // More code...
});

Answer 1

这将会发生，因为首先会呈现您的页面，当您的DOM完全呈现时，document.ready将会触发，然后document.ready内的代码将会运行，并且将删除jquery特定的html从页面开始闪烁您要删除的html。

我不确定，但我认为隐藏一个元素会比删除它更快，所以你可以这样做：

jQuery( document ).ready(function( $ ) {
  $( '.element').hide();
  // More code...
});

OR

jQuery( document ).ready(function( $ ) {
  $( '.element').css('display','none');
  // More code...
});

Answer 2

我建议将display: none;应用于.element的css，这可能是直接隐藏元素的最简单方法。

Answer 3

我不认为你可以在解析dom之前删除一个dom节点。如果你没有使用XHTML，请使用<noscript></noscript>。

Answer 4

尝试将head标记放在此代码中：

<script>
  $( '.parent_class' ).on('DOMSubtreeModified propertychange', function( el ) {
    if ( $( '.element').length ) {
      $( '.element' ).remove();
    }
  }, false);
<script>

~~注意：这是非常昂贵的操作，可能不是跨浏览器的。~~

Answer 5

这是我的解决方案：

向所有页面添加正文类no-js。

然后，如果启用了JS，则执行以下命令：

if ( $( 'body' ).hasClass( 'no-js' ) )
    $( 'body' ).attr( 'class', $( 'body' ).attr( 'class' ).replace( /no-js/, 'js' ) );

然后，您可以为JS禁用的人

设置这样的页面元素

body.no-js {
    // Some CSS
}

所以参考我的问题，我可以这样做

.pagination {
    display: none;
}

body.no-js .pagination {
    display: block;
}

注意：这个想法来自于BuddyPress的处理方式。

DOM元素在使用jQuery .remove（）方法从页面中删除之前暂时显示在屏幕上

5 个答案: