Estoy tratando de editar algo de HTML usando JSDOM dentro de Node.JS. Quiero que se elimine cualquier <blockquote> que sea hijo de, como máximo , un <div> circundante. Pero quiero que permanezca cualquier etiqueta <blockquote> que esté dentro de dos o más <div> s. He leído esta pregunta pero todavía estoy confundido. Puedes ver lo que he intentado en este JSFiddle . Aquí está el HTML original:
<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>debería convertirse en
<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>Aquí está la función que he probado hasta ahora, pero no funciona (ninguna de las comillas está cambiando):
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); }; }); }Simplemente .closest dos llamadas .closest en cada cita en bloque para ver si hay más de un div circundante:
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> (necesita un solo .parentElement porque .closest devolverá el elemento al que se llama si coincide)