How to prevent/stop/remove div element from loaded in search page result?

its been a long time since i post question on this website , i hope you guys are doing okay these days , now to the issue , i got this code that worked but not immediately:

const childElement = document.getElementById('m-x-content');
if (childElement && childElement.parentNode) {
    childElement.parentNode.remove();
}

I tried wrapping it with

document.addEventListener('DOMContentLoaded', () => {}

and it doesnt worked at all . Now the extensions i used : tampermonkey and runjavascript , both seems to only run the script fine but only after element is loaded .

Now i also already tried chatgpt suggestion about using and it didnt worked.

“… to use a bookmarklet or a custom browser extension to remove elements before they load, here’s a breakdown of how each approach can work:”

You can ask chapgpt and try it own your own .

so the question is , is this chrome/chromium specific issues , or thats just how browser work ? here is a link to a video that i recorded , you can see it in the last 15 sec that it didnt remove the element immedietly .