Javascript 如何在触发后从DOM中删除自定义GTM HTML标记？

对于单页应用程序，我想知道是否可以在触发自定义gtm html标记后将其从DOM中删除。

---

这背后的想法是避免通过自定义脚本无法控制DOM的增长。

我在最近的一个项目中遇到了同样的问题。然而，我还没有找到任何“本机”解决方案，主要是因为可以用GTM注入的每个标记都可以以完全不同的方式注入代码

我为本项目所做的是实施一个相当简单的解决方案（即使不是完美的），包括：

为GTM中的每个“自定义标记”包含一个唯一的ID，带有一个可存储在变量（脚本ID）中的公共前缀。CSS类会更好，但GTM似乎完全忽略了它们

每次路线改变或您认为合适时，执行该功能

<script id="{{SCRIPT_ID}}__PIXEL_ID">
    ... custom code ...
</script>

function flushScripts() {
    const pixels = document.body.querySelectorAll(':scope > script[id^="SCRIPT_ID"]');
    for (const p of pixels) { document.body.removeChild(p); }
}