I have an acf field 'select' that i want to remove some options from using js

but i can not acces the field it returns undefined

<select id="acf-block_5f35006ff2da4-field_5f3cce8a89941" 
data-ui="0" data-ajax="0" 
<option value="transparent">Transparent/bakgrundsfärg</option>

I have tried with

    document.addEventListener("DOMContentLoaded", function(event) {
     console.log("loaded") //Prints out: loaded

      var element = document.getElementById("acf-block_5f35006ff2da4-field_5f3cce8a89941");
      console.log(element)// Prints out: undefined


It seams that the block is not finished loading when DOMContentLoaded is triggerd

add_action('admin_enqueue_scripts', function ($hook) {

    $file = sprintf("%s/js/wp-admin_blocks.js", get_template_directory());

    if(file_exists($file)) {

        $mtime = filemtime($file);
        wp_enqueue_script('ams-blocks', sprintf("%s/js/wp-admin_blocks.js", get_template_directory_uri()), [], $mtime, true);


Maybe an easier approach would be to remove the values before the input is presented in the admin? That would circumvent having to do things in JavaScript after the field is already displayed.

Take a look at acf/prepare_field hook:

function my_acf_prepare_field( $field ) {

    return $field;

// Apply to all fields.
// add_filter('acf/prepare_field', 'my_acf_prepare_field');

// Apply to select fields.
// add_filter('acf/prepare_field/type=select', 'my_acf_prepare_field');

// Apply to fields named "custom_select".
add_filter('acf/prepare_field/name=custom_select', 'my_acf_prepare_field');

// Apply to field with key "field_123abcf".
// add_filter('acf/prepare_field/key=field_123abcf', 'my_acf_prepare_field');

If you are set on JavaScript, you can use ACF's JavaScript hooks:

acf.add_action('ready', function( $el ){
    // $el will be equivalent to $('body')
    // find a specific field
    var $field = $('#my-wrapper-id');
    // do something to $field

Documentation here: https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/

  • The problem is that i have acf for theme select witch is included in all blocks. Multiple blocks are used on same page, difrent blocks are supposed to have diferent options Aug 20 '20 at 21:06
  • i will check the hoocks out Aug 20 '20 at 21:07
  • Sadly this did not work, the script was fierd before the dom. the only solution is right now setTimeout wich is horible.. Aug 20 '20 at 21:20
  • @StefanAvramovic What about their new JavaScript API: advancedcustomfields.com/resources/javascript-api
    – NightHawk
    Aug 20 '20 at 21:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.