seo Question posted in
Some basic information to get you started with this can be found here.

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

I am using jQuery 1.4.5 on my page and use the loader ahead of an ajax request:

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

After finishing the request, I hide it:

$.mobile.loading('hide');

That works, but it produces an tag at the end of the page where the text would be located.

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

Several SEO tools are now issuing a warning due to this second h1 tag.

How can I remove the tag from the loader?

Tags:

3

Answers


  1. 0

    You can remove the needed element with the jQuery remove method.

    $('.ui-loader').find('h1').remove();
    Login or Signup to reply.
  2. 0

    From 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>
    Login or Signup to reply.
  3. 0

    I am always a little bit too late to the party, but if You need to customize the JQM loader, please be aware that, near the options described in Your question, You can supply also the html parameter.

    First of all, You need to set Your custom html without the unwanted h1 tag during JQM initialization:

    <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>

    After that, You can show the loader as-is without any text message or – when You need anyway to show a loading message – You can customize it further, always by using the html option:

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

    Please note:

    The standard textVisible option will not work anymore this way, because by default JQM is searching for the h1 tag which doesn’t exist anymore inside the loader markup. This shall be fixed inside JQM source code, with something that allows a more flexible configuration, without hard-coding the h1 tag:

    1513                this.element.find( "h1" ).text( message );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search