I'm trying to edit some HTML using JSDOM within Node.JS. I want any <blockquote> that is the child of at most one surrounding <div> to be removed. But I want any <blockquote> tag that is inside two or more <div>s to remain. I have read this question but I am still confused. You can see what I have tried in this JSFiddle. Here is the original 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>
Should turn into
<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>
Here is the function I have tried so far, but it isn't working (none of the blockquotes are changing):
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);
};
});
}
Just chain two .closest calls onto each blockquote to see if there's more than one surrounding 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>(you need a single .parentElement because .closest will return the element it's called on if it matches)