javascript - 如何使用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();​​​​​​​

这是一个working example .

注意:这将保留子元素上任何现有的事件处理程序，而使用 .html() 的答案将不起作用(因为元素已从 DOM 中删除)并重新添加)。

注释 2:某些链接问题的答案显示的代码与我在此处的答案类似，但它们使用 nodeType 常量(例如 return this .nodeType === Node.TEXT_NODE)。这是不好的做法，因为版本 9 以下的 IE 不实现 Node 属性。使用整数更安全(可以在 DOM level 2 spec 中找到)。