如何使用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中删除(仅文本)"first","second"和"third"而不影响任何子元素.

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级别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/