Drupal 7中如何移除通过$element['#attached']['js']附加的内联JS？

Great question! In Drupal 7, there isn't a direct built-in "detach" command specifically for removing inline JS added via $element['#attached']['js'], but there are a couple of reliable workarounds to achieve this depending on your use case:

1. Remove the JS from the Render Array (Server-Side, Before Rendering) #

If you're still working with the element's render array before it gets rendered to HTML, you can directly modify the #attached['js'] array to remove your target script.

Pro Tip: Use a Custom Key for Easy Targeting #

When attaching your inline JS, assign a unique key instead of using a numeric index. This makes it trivial to unset later:

// Attach the inline JS with a custom key
$element['#attached']['js']['my_unique_inline_js'] = array(
  'data' => 'console.log("My custom inline JS");',
  'type' => 'inline',
);

// Later, remove it with a single unset call
unset($element['#attached']['js']['my_unique_inline_js']);

If You Didn't Use a Custom Key #

If you used a numeric index, you'll need to loop through the array to find and remove the matching script:

foreach ($element['#attached']['js'] as $key => $js_entry) {
  if ($js_entry['type'] == 'inline' && $js_entry['data'] == 'console.log("My custom inline JS");') {
    unset($element['#attached']['js'][$key]);
    break; // Stop looping once we find the target
  }
}

2. Remove the Script from the DOM (Client-Side, After Rendering) #

If the element has already been rendered to the page, you can target the inline <script> tag directly with JavaScript. First, add a custom ID or class to the script when attaching it:

$element['#attached']['js'][] = array(
  'data' => 'console.log("My custom inline JS");',
  'type' => 'inline',
  'attributes' => array('id' => 'my-inline-script-target'),
);

Then, in your later client-side code, remove the script tag:

const targetScript = document.getElementById('my-inline-script-target');
if (targetScript) {
  targetScript.remove();
}

⚠️ Note: This only removes the script tag from the DOM. If the script already executed, you'll need to manually reverse any effects it caused (like event listeners, global variables, etc.).

3. Use Drupal Behaviors for Stateful JS (Best Practice) #

If your inline JS is tied to an element's state (e.g., it runs when the element loads, and needs cleanup when the element is removed), use Drupal's built-in behavior system with a detach method. This is especially useful for AJAX scenarios:

Drupal.behaviors.myCustomBehavior = {
  attach: function(context, settings) {
    // Run code when the element is added to the DOM
    $('#my-target-element', context).once('my-custom-behavior', function() {
      // Your inline JS logic here
      console.log("Element loaded!");
    });
  },
  detach: function(context, settings, trigger) {
    // Clean up when the element is removed
    if (trigger === 'unload') {
      $('#my-target-element', context).removeOnce('my-custom-behavior');
      // Reverse any effects from the attach method (e.g., unbind events)
    }
  }
};

Drupal will automatically call the detach method when elements are removed via AJAX or page unload, making this the most maintainable approach for dynamic content.

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