Search code examples
javascripthtmlnode.jsjsdomblockquote

JSDOM: removing once-nested blockquotes but leave 2+-nested blockquotes

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);
    };
});
}
Solution

  • 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)