如何用JavaScript在指定元素存在时移除目标CSS类？

Hey there! Let's sort out this problem for you. Your goal is to remove the .icon-navbar-alert-disable class from your icon only when a .views-exposed-form (the search module) is present inside the #navbar-collapse-second container. Below are reliable approaches using both native JavaScript and jQuery, plus a solution for dynamic content scenarios (common in Drupal).

1. Native JavaScript (No Libraries Needed) #

This is great if you want to avoid relying on jQuery. It runs once the DOM is fully loaded:

// Wait for all DOM elements to be loaded
document.addEventListener('DOMContentLoaded', function() {
  // Target the navbar container and your alert icon
  const navbarContainer = document.getElementById('navbar-collapse-second');
  const alertIcon = document.querySelector('.icon-navbar-alert-disable');

  // Make sure both elements exist before proceeding
  if (navbarContainer && alertIcon) {
    // Check if the search form exists inside the container
    const hasSearchForm = navbarContainer.querySelector('.views-exposed-form') !== null;

    if (hasSearchForm) {
      // Remove the disable class from the icon
      alertIcon.classList.remove('icon-navbar-alert-disable');
    }
  }
});

2. jQuery (For Projects Using jQuery) #

If your project (like many Drupal setups) uses jQuery, this concise version will work:

$(document).ready(function() {
  // Check if the navbar container contains the search form
  if ($('#navbar-collapse-second').find('.views-exposed-form').length > 0) {
    // Remove the disable class from the icon
    $('.icon-navbar-alert-disable').removeClass('icon-navbar-alert-disable');
  }
});

3. Handling Dynamic Content (e.g., Ajax-loaded Search Forms) #

If the search module is loaded dynamically (via Ajax, which is common in Drupal views), the above methods might miss the change. Use a MutationObserver to watch for changes in the navbar container:

document.addEventListener('DOMContentLoaded', function() {
  const navbarContainer = document.getElementById('navbar-collapse-second');
  const alertIcon = document.querySelector('.icon-navbar-alert-disable');

  if (!navbarContainer || !alertIcon) return;

  // Set up an observer to watch for changes in the navbar's children
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function() {
      // Check if the search form is now present
      if (navbarContainer.querySelector('.views-exposed-form')) {
        alertIcon.classList.remove('icon-navbar-alert-disable');
        // Optional: Stop observing once the class is removed to save resources
        observer.disconnect();
      }
    });
  });

  // Configure the observer to watch for child element additions/removals
  const observerConfig = { childList: true, subtree: true };

  // Start observing the navbar container
  observer.observe(navbarContainer, observerConfig);
});

Key Notes: #

• Specific Selectors: If there are multiple icons with .icon-navbar-alert-disable, make your icon selector more specific (e.g., #navbar .icon-navbar-alert-disable) to avoid unintended changes.
• Drupal Context: Since you mentioned Drupal, if the search form is added via a view exposed form, the MutationObserver approach is the most reliable because views often load content dynamically.

内容的提问来源于stack exchange，提问作者drup8