调用removeChild删除选中元素无报错但未生效，求排查及优化方案

一、现有代码的核心问题 #

1. 元素复制导致视觉上未删除：你通过innerHTML把目标img的HTML字符串拼到父元素内容最前面，这会生成一个全新的img节点。同时，innerHTML赋值操作会销毁父元素原有的所有子节点，包括你要删除的e。后续执行e.parentElement.removeChild(e)时，e已经脱离了DOM树，这步操作完全无效，页面上只会留下新复制的img，看起来像是原元素没被删除。
2. 冗余的递归逻辑：从HTML结构看，每个img的直接父元素就是带id的div，完全不需要递归调用getSelector，直接用e.parentElement.id就能拿到目标id，递归反而增加了无意义的复杂度，还可能在父元素无id时触发无限递归。
3. 重复DOM查询浪费性能：循环里多次调用document.querySelector(#${location})，每次都会重新遍历DOM树，没必要。

二、更优实现方案 #

场景1：移动元素到父元素最前方并设置样式（原代码的实际意图） #

如果你是想把每个img移到父元素最前面，同时设置position:relative，直接操作DOM节点即可，避免用innerHTML（会销毁节点、丢失事件绑定）：

window.addEventListener("DOMContentLoaded", function () {
    if (window.location.href.includes("language_edit")) {
        document.querySelectorAll("img.example").forEach(img => {
            const parent = img.parentElement;
            // 把img移到父元素最前面
            parent.prepend(img);
            // 设置样式
            img.style.position = "relative";
        });
    }
}, false);

场景2：直接删除所有目标元素 #

如果你的需求就是删除这些img，代码可以极简：

window.addEventListener("DOMContentLoaded", function () {
    if (window.location.href.includes("language_edit")) {
        document.querySelectorAll("img.example").forEach(img => {
            img.remove();
        });
    }
}, false);

三、控制台执行有效的原因 #

在控制台手动运行代码时，页面已经完全加载，你没有提前通过innerHTML替换父元素内容，e仍然在DOM树中，所以removeChild操作能正常删除原元素；而原代码在DOMContentLoaded中执行时，innerHTML先销毁了原节点，导致后续删除操作失效。

内容的提问来源于stack exchange，提问作者Andrew Garrison