Question

I have a Drupal site that processes video. When the videos process successfully, the video populates in the proper page, with some social media links beside it. But while the video is in-progress with transcoding, or has failed transcoding, the system provides messages on the same page that the video will end up displaying, and shows those social links despite there not being anything worth sharing yet. I’d like to remove them.

When the video is processing, a message shows up with a class of .video-inprogress. When it has failed, it shows a div with a class of .video-conversion-failed. I’d like to target both of those, and when present, remove the social links div (.service-links) entirely.

This is the code I’ve attempted to use; it fails silently:

if (jQuery('.video-inprogress, .video-conversion-failed').length) {
  jQuery('.service-links').remove();
};

Any pointers on what I’m doing wrong? (I’m using ‘jQuery’ instead of ‘$’ to solve another conflict present in this site, which I inherited and is pretty well larded-down with extraneous JS and jQuery code.)

Answer 1

Try putting your code within document ready handler:

(function($){
   $(document).ready(function(){
      if ($('.video-inprogress, .video-conversion-failed').length) {
           $('.service-links').remove();
      };
   })
})(jQuery)