如何解决JSDOM:删除一次嵌套的块引用但留下 2+ 嵌套的块引用
我正在尝试在 Node.JS 中使用 JSDOM 编辑一些 HTML。我希望删除任何 <blockquote>
,它是至多一个围绕 <div>
的孩子。但我希望保留两个或多个 <blockquote>
内的任何 <div>
标签。我已阅读this question,但我仍然感到困惑。你可以看到我在这个 JSFiddle 中的尝试。这是原始 HTML:
<html>
<div id="div1">
<blockquote>Text 1</blockquote>
</div>
<div id="div2">
<div id="div3">
<blockquote>Text 2</blockquote>
<div id="div4">
<blockquote>Text 3</blockquote>
</div>
</div>
</div>
<span onclick="removeblockquotes(this)">Change</span>
</html>
应该变成
<html>
<div id="div1">
Text 1
</div>
<div id="div2">
<div id="div3">
<blockquote>Text 2</blockquote>
<div id="div4">
<blockquote>Text 3</blockquote>
</div>
</div>
</div>
</html>
这是我迄今为止尝试过的功能,但它不起作用(所有块引用都没有改变):
function removeblockquotes(e)
{
var x = document.querySelectorAll("blockquote");
x.forEach(y=>{
if (y.parentNode.parentNode==null){
y.parentNode.appendChild(x.innerHTML);
y.parentNode.removeChild(x);
};
});
}
解决方法
只需将两个 .closest
调用链接到每个块引用上,看看是否有多个 div:
for (const b of document.querySelectorAll('blockquote')) {
if (!b.closest('div')?.parentElement.closest('div')) {
b.replaceWith(b.textContent);
}
}
console.log(document.body.innerHTML);
<div id="div1">
<blockquote>Text 1</blockquote>
</div>
<div id="div2">
<div id="div3">
<blockquote>Text 2</blockquote>
<div id="div4">
<blockquote>Text 3</blockquote>
</div>
</div>
</div>
(您需要一个 .parentElement
,因为 .closest
将返回调用它的元素如果匹配)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。