如何删除 javascript 中 span 标签内的所有嵌套 span 标签？

Question

我的 innerHTML 看起来像这样：

<span class="test"> <span> </span> Hello I am here <span class="test1"> </span> </span>

我想删除所有嵌套的跨度标签，以便得到这个：

<span class="test"> Hello I am here </span>

我试过 using.replace('', '').replace('', '') in 但必须以某种方式检查最后一个跨度，而且可能有不同的跨度是从谷歌文档动态生成的，所以它会如果我可以对所有不是第一个或最后一个跨度的跨度进行替换，那就更好了。

Answer 1

尝试这个

 $('.test').find('span').remove()

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="test"> <span>dummy data </span> Hello I am here <span class="test1"> dummay data</span> </span>

Answer 2

您可以通过将外部跨度的textContent设置为它自己的textContent来做到这一点 - 因为读取元素的textContent不会返回任何散布在文本中的标记标签。

重置textContent还可以避免 HTML 解析器解析文本内容，就像用于设置外部元素的innerHTML属性一样。

 "use strict"; let testSpan = document.querySelector(".test"); testSpan.textContent = testSpan.textContent; console.log( testSpan.outerHTML);

 <span class="test"><span> </span> Hello I am here <span class="test1"> </span> </span>

如果您愿意，可以在分配回textContent之前用单个空格字符替换连续的空白字符。

Answer 3

这将起作用

 "use strict"; const elm = document.querySelector(".test"); elm.innerHTML = elm.innerText; console.log(elm.outerHTML);

 <span class="test"><span> </span> Hello I am here <span class="test1"> </span> </span>

Answer 4

使用此代码删除任何空的span元素。

 const allSpan = document.querySelectorAll("span"); allSpan.forEach(item => { if(item.childElementCount === 0 && item.textContent.trim().length === 0){ item.parentElement.removeChild(item) } })

 <span class="test"> <span> </span> Hello I am here <span class="test1"> </span> </span>;

您可以通过在浏览器中检查代码来查看结果