CODEWITHSUNDEEP
jquery
twelvealpha
twelvealpha

Reputation: 25

Remove one element of a particular class if one of two other classes present in page

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

Upvotes: 2

Views: 128

Answers (2)

Ram
Ram

Reputation: 144659

Try putting your code within document ready handler:

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

Upvotes: 1

JamiePatt
JamiePatt

Reputation: 43

Try using a variable for the length of the two classes:

var n = jQuery('.video-inprogress, .video-conversion-failed').length;

if (n >= 1) {
  jQuery('.service-links').remove();
};

If it's still giving you problems try extending the .length statement:

var n = jQuery('.video-inprogress').length;
var n += jQuery('.video-conversion-failed').length;

Upvotes: 0

Related Questions