Jsoup如何移除元素所有子元素且保留自身文本内容

问题原因 #

jQuery的empty()方法会清空目标元素的所有子节点，包含元素节点、文本节点、注释节点在内的所有内容都会被移除，你要保留的“Name”属于label元素的直接子文本节点，自然也会被同步删除。

解决方案 #

jQuery 方案（最简） #

直接调用children().remove()即可，jQuery的children()方法只会匹配元素的直接子元素节点，不会包含文本、注释等非元素节点，移除后就能保留元素本身的文本内容：

$('label.field__label').children().remove()

原生 JavaScript 方案 #

如果不依赖jQuery，可以遍历子节点过滤掉元素节点后删除，或者用replaceChildren方法实现：

const targetEl = document.querySelector('.field__label')
// 方法1：遍历删除子元素节点
for (let i = targetEl.childNodes.length - 1; i >= 0; i--) {
  if (targetEl.childNodes[i].nodeType === Node.ELEMENT_NODE) {
    targetEl.removeChild(targetEl.childNodes[i])
  }
}

// 方法2：replaceChildren 一键替换
targetEl.replaceChildren(...[...targetEl.childNodes].filter(node => node.nodeType !== Node.ELEMENT_NODE))

效果验证 #

假设你的label存在子元素时的结构如下：

<label class="field__label" for="1">
  Name
  <span class="required">*</span>
  <input type="hidden" name="hideField">
</label>

执行上述方法后，最终得到的结构就是你需要的保留文本、移除所有子元素的效果：

<label class="field__label" for="1">Name</label>

你当前的示例本身没有子元素，执行方法后不会产生任何变更，完全符合预期。

内容的提问来源于stack exchange，提问作者Anoop