Meta field bulk editing no longer working in WP 6.0 [closed]

Question

Until recently, I was using the following PHP and jQuery code for adding bulk editing support for a meta field (price) in a custom post type (Book):

PHP:

function show_bulk_edit_book_metabox( $column_name, $post_type ) {
    static $print_nonce = true;
    if ( $print_nonce ) {
        $print_nonce = false;
        wp_nonce_field( plugin_basename( __FILE__ ), 'book_edit_nonce' );
    }

    switch ( $column_name ) {
        case 'price':
            ?>
        <fieldset class="inline-edit-col-right inline-edit-book">
            <div class="inline-edit-col column-<?php echo esc_attr( $column_name ); ?>">
                <label class="inline-edit-group">
                    <span class="title"><?php _e( 'Price', 'my-domain' ); ?></span><input type="text" name="price" />
                </label>
            </div>
        </fieldset>
            <?php
        break;
    }
}
add_action( 'bulk_edit_custom_box', 'show_bulk_edit_book_metabox', 10, 2 );

JQUERY:

( function( $ ) {
    $( '#bulk_edit' ).on( 'click', function() {
        // Define the bulk edit row.
        var $bulk_row = $( '#bulk-edit' );

        // Get the selected post ids that are being edited.
        var $post_ids = new Array();
        $bulk_row.find( '#bulk-titles' ).children().each( function() {
            $post_ids.push( $( this ).attr( 'id' ).replace( /^(ttle)/i, '' ) );
        });

        // Get the data.
        var $nonce = $bulk_row.find( 'input[name="book_edit_nonce"]' ).val();
        var $price = $bulk_row.find( 'input[name="price"]' ).val();

        // Save the data.
        $.ajax({
            url: ajaxurl, // This is a variable that WordPress has already defined for us.
            type: 'POST',
            async: false,
            cache: false,
            data: {
                action: 'save_bulk_edit_book', // This is the name of our WP AJAX function that we'll set up next.
                post_ids: $post_ids, // And these are the parameters we're passing to our function.
                price: $price,
                book_edit_nonce: $nonce
            }
        });
    });

})( jQuery );

Apparently, WP 6.0 has made some accessibility markup changes to the bulk edit screen and the following part of the code no longer works:

$bulk_row.find( '#bulk-titles' ).children().each( function() {
    $post_ids.push( $( this ).attr( 'id' ).replace( /^(ttle)/i, '' ) );
});

This is the new HTML markup of the selected bulk post IDs list (an example):

<div class="inline-edit-col">
    <div id="bulk-title-div">
        <div id="bulk-titles">
            <ul id="bulk-titles-list" role="list">
                <li class="ntdelitem"><button type="button" id="_2590" class="button-link ntdelbutton"><span class="screen-reader-text">Remove "167" from Bulk Edit</span></button><span class="ntdeltitle" aria-hidden="true">167</span></li>
                <li class="ntdelitem"><button type="button" id="_2589" class="button-link ntdelbutton"><span class="screen-reader-text">Remove "166" from Bulk Edit</span></button><span class="ntdeltitle" aria-hidden="true">166</span></li>
            </ul>
        </div>
    </div>
</div>

Instead of getting the selected post IDs, I'm getting an empty value. Any idea of which changes I should make to this code to make it work in WP 6.0?

Thanks in advance

Answer 1

I managed to find a solution by myself. Just replace:

$bulk_row.find( '#bulk-titles' ).children().each( function() {
    $post_ids.push( $( this ).attr( 'id' ).replace( /^(ttle)/i, '' ) );
});

with:

$bulk_row.find( '#bulk-titles-list .button-link.ntdelbutton' ).each( function() {
    $post_ids.push( $( this ).attr( 'id' ).replace( /_/g, '' ) );
});