2

I am trying to remove empty H1 tags from my FE environment using JS. After I remove it bots and crawlers still see these tags = they are still visible via Page Source, the DOM nodes are loaded ect..

Is there a way to completely remove an element from the DOM?

My html is this:

<a href="/link"><img src="banner.jpg" title="Title" />
  <h1 class="nivo-h1-title">
    <span></span>
  </h1>
</a>

Firstly i tried jQuery method: 

$( document ).ready(function() {
    $( ".nivo-h1-title" ).remove();
});

This way the elements are removed from final HTML but still are present when you view the page via Page Source and Robots / Crowlers still see them. I researched a lot and tried pure Javascript method using code from this link Remove all child elements of a DOM node in JavaScript - removeChild with parentNode:

var elements = document.getElementsByClassName('nivo-h1-title');
while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
}

But alas the html elements are still in the DOM = still can be seen via Page Source.

I already checked this Completly remove a tag from the source and others, but IS there a way to do this - completely remove elements from source?

Hristo Kalaidzhiev
  • 38
  • 6
  • 3
    Javascript can remove DOM nodes, but it can't remove them from the page source (as they are served before the javascript is executed client-side). You'll probably need to handle that server-side. – Anthony Garcia-Labiad Jan 30 '19 at 13:56

1 Answers1

2

JavaScript is executed after the initial page is served to the client. No way around that. You have to move that logic from the client-side JavaScript to a server-side language like e.g. PHP. That way it will be removed before the page is served.

The topic you found already had the right answer:

This is just how "view source" works in browsers. It shows you what came from the server (and usually re-queries it from the server [which may read it from cache]), not what is currently in the page.

To see what's currently in the page, you need to use the "Elements" or "DOM" tab in your browser's dev tools (usually opened via F12 or Ctrl+Shift+I). You can usually open it and move to a specific element by right-clicking that element on your page and choosing "Inspect element", so if you do that with your form after your $('.de').remove(); is run, you'll see the form without the .de elements in it.

Hannes Schneidermayer
  • 4,729
  • 2
  • 28
  • 32
  • I've come to understand it now, but then again I came across some links like [this](https://stackoverflow.com/questions/4942070/differences-between-detach-hide-and-remove-jquery) and others and got confused. So generalizing = JS and jQuery (client side) methods _actually do remove_ an object from the DOM, but **after** rendering all code. Also, since JS method is faster - its preferred. To **completely** remove something it has to be made server side. Was that correct? – Hristo Kalaidzhiev Jan 31 '19 at 13:39
  • @HristoKalaidzhiev that was perfectly correct. Well, it also is "completely" removed when you use JavaScript, but *afterwards*. – Hannes Schneidermayer Jan 31 '19 at 15:11