如何从 jQuery 移动加载程序中删除 <h1> 标签？

Question

我在我的页面上使用 jQuery 1.4.5 并在 ajax 请求之前使用加载程序：

$.mobile.loading('show', {theme:"e", text:"", textonly:false, textVisible: false});

完成请求后，我将其隐藏：

$.mobile.loading('hide');

可行，但它会在页面末尾文本所在的位置生成一个标记。

<div class="ui-loader ui-corner-all ui-body-e ui-loader-default">
 <span class="ui-icon-loading"></span>
 <h1></h1>
</div>

由于第二个 h1 标签，一些 SEO 工具现在发出警告。

如何从加载程序中删除标签？

Answer 1

您可以使用 jQuery remove 方法删除所需的元素。

$('.ui-loader').find('h1').remove();

Answer 2

来自 jQuery documentation:

Remove the set of matched elements from the DOM.

Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

setTimeout(function(){
  $("h1").remove();
}, 3000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>H1 Heading</h1>

Answer 3

我总是有点晚了，但如果您需要自定义 JQM 加载程序，请注意，在您的问题中描述的选项附近，您还可以提供 html参数.

首先，您需要在 JQM 初始化期间设置您的自定义 html，而不使用不需要的 h1 标记：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
  $(document).on("mobileinit", function () {
    /* jQuery Mobile initialization */
    var html = "<div class='ui-loader'><span class='ui-icon-loading'></span></div>";
    $.mobile.loader.prototype.defaultHtml = html;
    // ... other settings as You need
    $.mobile.loader.prototype.options.text = "";
    $.mobile.loader.prototype.options.textVisible = false;
  });
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

之后，您可以按原样显示 loader 而无需任何文本消息，或者 - 当您仍然需要显示加载时 message - 您可以进一步自定义它，始终使用html 选项：

var html = "<div class='ui-loader'><span class='ui-icon-loading'></span><h6>Wait...</h6></div>";
$.mobile.loading("option", "html", html);
$.mobile.loading("show");

请注意：

标准 textVisible 选项将不再以这种方式工作，因为默认情况下 JQM 正在搜索加载程序标记内不再存在的 h1 标记。这应该在 JQM 源代码中修复，允许更灵活的配置，而无需硬编码 h1 标记：

1513                this.element.find( "h1" ).text( message );

如何从 jQuery 移动加载程序中删除 <h1> 标签？

How to remove <h1> tag from jQuery mobile loader?

jquery

jquery-mobile