issue with Chrome’s garbage collector

I’ve been facing an issue with Chrome’s garbage collector not clearing nodes that are no longer in use, even after I manually remove the JavaScript scripts that reference them.

This was working fine in previous Chrome versions, but in the latest version (v.129), the garbage collector seems to be malfunctioning or behaving differently. I tested this with a basic JS script, and it still works as expected in MS Edge for now, but I’m concerned that this might also stop working in their next release.

Has anyone else noticed this change in behavior in Chrome’s GC? I’ve tried using Bootstrap’s dispose() method to manually clean up, im having same issue with other JS scripts also.

Any advice or insights on why Chrome’s GC is no longer handling this correctly would be greatly appreciated.

This is the test script:

function writeHtml() {
                var dynamicDiv = $('#dynamicDiv');
                var selectHtml = `
                    <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
                        Link with href
                        </a>
                        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                        Button with data-bs-target
                        </button>

                        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
                        <div class="offcanvas-header">
                            <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                        </div>
                        <div class="offcanvas-body">
                            <div>
                            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
                            </div>
                            <div class="dropdown mt-3">
                            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                Dropdown button
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                            </div>
                        </div>
                        </div>
                `;
                dynamicDiv.append(selectHtml);
                
            }

            function destroy() {
                
                disposeBootstrapComponents();
                
                $('#dynamicDiv').empty();
                
                /* Tryed this, doesnt help
                var $dynamicDiv = $('#dynamicDiv');
                $dynamicDiv.empty(); // Empty the contents of dynamicDiv before replacing it

                var $clonedDiv = $dynamicDiv.clone(false);
                $dynamicDiv.replaceWith($clonedDiv);
                dynamicDiv = null;
                clonedDiv = null;

                */

            }
             
            function disposeBootstrapComponents() {
                $('[data-bs-toggle="dropdown"]').dropdown('dispose');
                $('.offcanvas').offcanvas('dispose');
            }

            $(document).on('click', '#addButton', function () {
                writeHtml();
            });
            $(document).on('click', '#destroyButton', function () {
                destroy();
            });

detached