Support

Account

Home Forums Front-end Issues ACF action "Remove" fires on add row

Solving

ACF action "Remove" fires on add row

  • When using acf.add_action(‘remove’) found it does fire on removing a row, but it also fires on adding a row. Which make it difficult to isolate an actual row removal. The row being passed as the “removed row” is actually the row that was just added.

  • Hi @goldhat

    You should be able to check the object if it’s cloned or not (prevObject). It should be something like this:

    function my_acf_remove_test() {
        ?>
        <script type="text/javascript">
        (function($){
            
            // only do this after the assets are fully loaded
            acf.add_action('remove', function( $el ){
    	
                // $el will be equivalent to the new element being removed $('tr.row')
                
                
                // Check if the row is added or removed
                if( !$el.prevObject.hasClass( "acf-clone" ) ){
                    
                    // the row is removed
                    console.log("removed");
                    
                } else {
                    
                    // the row is added
                    console.log("added");
                    
                }
                
            });
    
        })(jQuery);
        </script>
        <?php
    }
    
    add_action('acf/input/admin_footer', 'my_acf_remove_test');

    I hope this helps 🙂

  • Hi,
    I’m also having this issue when using the remove action to detect a removal of a flexible content layout. So I implemented James’ prevObject workaround, which did the job until I used an acf image field of a layout.
    When selecting an image in the media library, the remove action gets triggered, too (had a look in acf-input.js: it’s the dispose method of the wp.media.view.AttachmentCompat object).
    But this time I’m getting an error message saying that I can’t use the hasClass method on undefined. That’s because $el in this context is a form element and has no prevObject property.

    Now as a workaround for my case I’m also checking if remove was triggered when a layout was removed:

    if ( ! $el.hasClass('layout') || $el.prevObject.hasClass( "acf-clone" ) ){
      return false;
    }
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.