如何使用 jQuery 从父元素中删除文本（不删除内部元素）？

Question

想象一下我有类似以下内容的内容（修改自http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/）

<div id="foo">
    first
    <div id="bar1">
        jumps over a lazy dog!
    </div>
    second
    <div id="bar2">
        another jumps over a lazy dog!
    </div>
    third
</div>

如何从 DOM 中仅删除（仅文本）“第一”、“第二”和“第三”而不影响任何子元素。

Answer 1

如果要删除所有子文本节点，可以使用

.contents()

然后使用

.filter()

将匹配集减少为仅文本节点：

$("#foo").contents().filter(function () {
     return this.nodeType === 3; 
}).remove();​​​​​​​

这是一个工作示例。

注意：这将保留子元素上任何现有的事件处理程序，使用

.html()

的答案将不起作用（因为元素已从 DOM 中删除并重新添加）。

注 2：某些链接问题中的答案显示的代码与我在此处的答案类似，但它们使用

nodeType

常量（例如

return this.nodeType === Node.TEXT_NODE

）。这是不好的做法，因为版本 9 以下的 IE 不实现

Node

属性。使用整数更安全（可以在 DOM level 2 规范中找到）。

Answer 2

这是一个非 jQuery 版本，可在所有主要浏览器（直到 IE 5）中运行，只是为了演示没有 jQuery 的生活是多么可怕。

演示：http://jsfiddle.net/timdown/aHW9J/

代码：

var el = document.getElementById("foo"), child = el.firstChild, nextChild;

while (child) {
    nextChild = child.nextSibling;
    if (child.nodeType == 3) {
        el.removeChild(child);
    }
    child = nextChild;
}

Answer 3

试试这个：

$("#foo").html($("#foo").find("div"));​

演示：http://jsfiddle.net/PXxC4/

Answer 4

你可以用这个。

$("#foo").html($("#foo").children());​