javascript - 如何删除已被outerHTML修改的元素

Question

我在 DOM 中有一个元素，我使用 outerHTML 更新其 HTML属性，但我无法使用 remove() 之类的方法删除它.

<div id="element">Element</div>
<div id="remove">Removed element</div>

const element = document.getElementById("element");
const removedElement = document.getElementById("remove");

element.outerHTML = "<div>First</div>";
element.remove();
removedElement.remove();

在我的示例中，element 使用 outerHTML 进行更新，但我无法使用 remove() 方法删除它，而我可以删除轻松removedElement。

这不是预期的。我在规范中遗漏了什么吗？我查阅过 W3C，但它对我来说非常先进。

并且，MDN 没有提及任何相关内容(除非我错过了一些内容)。我可以使用其他方法来更新 HTML 内容或从 DOM 中删除元素，但我很想知道最初的原因。

Answer 1

根据MDN :

while the element will be replaced in the document, the variable whose outerHTML property was set will still hold a reference to the original element

element变量仍然包含 <div id="element">Element</div> ，但不再位于文档树中，因此调用 remove()没有效果。

const element = document.getElementById("element");
element.outerHTML = "<div>First</div>";
console.log(element); // still has original contents

<div id="element">Element</div>

要保留对新元素的引用，请考虑使用 Element#replaceWith和document.createElement .

const element = document.getElementById("element");
const newEl = Object.assign(document.createElement('div'), {textContent: 'First'});
element.replaceWith(newEl);
console.log(element);
console.log(newEl);
newEl.remove();

<div id="element">Element</div>