JavaScript conflict with SkyVerge plugins

Hey there,

I’m Willington Vega, from the SkyVerge team.

We recently started seeing a JavaScript error that occurs when Disable Admin Notices and at least one of the SkyVerge plugins are activated. The error is:

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

We are seeing that error on the Orders, Products, Edit Product, and other WooCommerce pages when one of the SkyVerge plugin shows a notice. In those cases it silently breaks other scripts on the page.

The problem occurs when one of our plugins renders an admin notice and then tries to execute the following JavaScript line:

// move any delayed notices up into position .show();
$( '.js-wc-plugin-framework-admin-notice:hidden' ).insertAfter( $placeholder ).show();

The error is caused by a conflict between our approach to render admin notices and the way Disable Admin Notices inserts the Hide notification forever links.

Disable Admin Notices uses a regular expression to inject the link, but the regular expressions assumes that only one notice (or top level element) is rendered per callback. If two or more notifications (or top level elements) are rendered by the same callback, the regular expression causes the second and subsequent elements to become children of the first element.

For example, the regular expression causes the following notices:

<div class="notice js-wc-plugin-framework-admin-notice updated is-dismissible" data-plugin-id="elavon_vm"
    data-message-id="wc-plugin-framework/ch54179-1">
    <p>Hello World 1!</p>
</div>
<div class="notice js-wc-plugin-framework-admin-notice updated" data-plugin-id="elavon_vm"
    data-message-id="wc-elavon-welcome">
    <p><strong>WooCommerce Elavon Converge is almost ready!</strong> To get started, please ?<a
            href="https://plugins.skyverge.test/wp-admin/admin.php?page=wc-settings&tab=checkout&section=elavon_converge_credit_card">connect
            to Elavon Converge</a>.</p>
</div>
<div class="js-wc-elavon-vm-admin-notice-placeholder"></div>

to be converted into:

<div class="notice js-wc-plugin-framework-admin-notice updated is-dismissible" data-plugin-id="elavon_vm"
    data-message-id="wc-plugin-framework/ch54179-1">
    <div class="wbcr-dan-hide-notices">
        <p>Hello World 1!</p>
    </div>
    <div class="notice js-wc-plugin-framework-admin-notice updated" data-plugin-id="elavon_vm"
        data-message-id="wc-elavon-welcome">
        <p><strong>WooCommerce Elavon Converge is almost ready!</strong> To get started, please ?<a
                href="https://plugins.skyverge.test/wp-admin/admin.php?page=wc-settings&tab=checkout&section=elavon_converge_credit_card">connect
                to Elavon Converge</a>.</p>
    </div>
    <div class="js-wc-elavon-vm-admin-notice-placeholder"><a href="#" data-nonce="1f3f173ccd"
            data-notice-id="f21598d37f911d432eeb2c6f09a3126f_aa84826fcc8abb4ada37630566d8d150"
            class="wbcr-dan-hide-notice-link">[Hide notification forever]</a></div>
</div>

We plan to include a workaround to prevent the JavaScript error, but that doesn’t fix the Hide notification forever link on our notices. Only one link is rendered, regardless of the number of notices, and clicking that link hides all notices from the same plugin.

Have you considered adding support for admin_notices callbacks that render more than one notice?

Alternatively, would it be possible to add a filter to allow third parties to prevent Disable Admin Notices from injecting link, leaving the HTML content of the notices untouched? This would provide a different method to fix prevent the JavaScript error and would prevent the broken link from being included.

Thanks!