gpt4 book ai didi

javascript - 从 DOM 中删除除一个子树之外的所有节点

转载 作者:行者123 更新时间:2023-12-05 05:42:55 27 4
gpt4 key购买 nike

我的页面结构如下:

<body>
<div class="one">
<div class="two">
<p class="three">Some text</p>
</div>
</div>
<div class="four">
<div class="five">
<p class="six">Some other text</p>
</div>
</div>
</body>

给定一个选择器,例如 .five,我想从 DOM 中删除所有元素,同时保留 .four > .five > .six 的层次结构。换句话说,删除所有元素后,我应该留下:

<body>
<div class="four">
<div class="five">
<p class="six">Some other text</p>
</div>
</div>
</body>

针对这个问题,我提出了以下解决方案:

function removeElementsExcept(selector) {
let currentElement = document.querySelector(selector)
while (currentElement !== document.body) {
const parent = currentElement.parentNode
for (const element of parent.children) {
if (currentElement !== element) {
parent.removeChild(element)
}
}
currentElement = parent
}
}

这对于上述情况已经足够好了,为此我创建了一个 JSfiddle .

但是,当我尝试在更复杂的网页上运行它时,例如 https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild通过诸如 removeElementsExcept('#sect1') 之类的调用,我希望只有蓝色的 div 包含文本“注意:只要引用 ...”及其要保留在页面上的内容。但是,如果您尝试运行它,页面上还会保留许多其他元素以及蓝色 div

我在我的函数中做错了什么?

最佳答案

发生这种情况是因为您正在修改正在迭代的集合。您可以通过手动调整用于查看子项的索引来解决此问题。

function removeElementsExcept(selector) {
let currentElement = document.querySelector(selector)
while (currentElement !== document.body) {
const parent = currentElement.parentNode;
let idx = 0;
while (parent.children.length > 1) {
const element = parent.children[idx];
if (currentElement !== element) {
parent.removeChild(element)
} else {
idx = 1;
}
}
currentElement = parent
}
}

关于javascript - 从 DOM 中删除除一个子树之外的所有节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71929628/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com