javascript - Why am I able to remove certain elements using document.getElementsByClassName() but not others?

Question

I'm trying to create a simple script in ViolentMonkey to run on Letterboxd.com film pages - e.g. https://letterboxd.com/film/mirror/.

I'm aiming to remove certain elements from the page - namely, the average rating and the facebook share buttons.

My script looks like so:

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
var rating = document.getElementsByClassName('average-rating')
 $(rating).remove()
 console.log("Rating removed!")
var sidebar = document.getElementsByClassName('panel-share')
 $(sidebar).remove()
 console.log("Panel removed!")
});

The element with the class "panel-share" (facebook share buttons) is removed, no problem. However, the element with class "average-rating" is still there.

I tried to instead delete the section-level parent element it like so (it has two classes, "section" and "ratings-histogram-chart):

var chart = document.querySelector('.section.ratings-histogram-chart')
$(chart).remove()
console.log("Chart removed!")

But still no luck... In fact, querySelector does not work at all.

Can anyone help me with this? I feel I am doing something very obvious wrong, but I am quite new. Many thanks in advance.

EDIT: The HTML on which I'm trying to run it is:

var rating = document.getElementsByClassName('average-rating')
$(rating).remove()
console.log("Rating removed!")
var sidebar = document.getElementsByClassName('panel-share')
$(sidebar).remove()
console.log("Panel removed!");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="average-rating" itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating"> <a href="/film/mirror/ratings/" class="tooltip display-rating -highlight" data-original-title="Weighted average of 4.29 based on 35,429&nbsp;ratings">4.3</a> </span>

<li class="panel-share">
  <div id="share-off" style="display: block;"><a href="#">Share</a></div>
  <div id="share-on" style="display: none;"> <input type="text" class="field -transparent" value="https://boxd.it/28Q8" readonly="" spellcheck="false"> <a href="https://twitter.com/intent/tweet?text=Mirror%20%281975%29%20on%20%40letterboxd%3A%20https%3A%2F%2Fboxd.it%2F28Q8" class="replace popup-link tw-popup"
      title="Tweet a link">Tweet</a> <a href="https://www.facebook.com/dialog/feed?app_id=173683136069040&amp;link=https%3A%2F%2Fletterboxd.com%2Ffilm%2Fmirror%2F&amp;picture=https%3A%2F%2Fa.ltrbxd.com%2Fresized%2Ffilm-poster%2F5%2F1%2F0%2F6%2F4%2F51064-mirror-0-230-0-345-crop.jpg%3Fk%3D8287891685&amp;name=Mirror%20%281975%29%20on%20Letterboxd.com&amp;caption=Directed%20by%20Andrei%20Tarkovsky&amp;description=A%20dying%20man%20in%20his%20forties%20recalls%20his%20childhood%2C%20his%20mother%2C%20the%20war%20and%20personal%20moments%20that%20tell%20of%20and%20juxtapose%20pivotal%20moments%20in%20Soviet%20history%20with%20daily%20life.&amp;message=&amp;display=popup&amp;redirect_uri=https://letterboxd.com/facebook-share"
      class="replace popup-link fb-popup fbc-has-badge fbc-UID_1" title="Share to Facebook">Share</a> </div>
</li>

question from:https://stackoverflow.com/questions/65909151/why-am-i-able-to-remove-certain-elements-using-document-getelementsbyclassname

Answer 1

The problem here seems to be that the rating graph (incl. the average rating) is loaded asynchronous and thus is not present when your script runs.

In order to counter this, you could listen for changes of the parent .sidebar element and then remove it as soon as it's present:

$(function() {
  $('.panel-share').remove();
  
  // listen for changes of the .sidebar element
  $('.sidebar').on('DOMSubtreeModified', function() {
    if($('.average-rating').length) {
      $('.average-rating').remove();
      $(this).off('DOMSubtreeModified');
    }    
  })    
});
``