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

yhived7q 于 5个月前发布在 jQuery

关注(0)|答案(4)|浏览(69)

假设我有如下内容（由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”而不影响任何子元素？

jquery

来源：https://stackoverflow.com/questions/11633610/how-to-remove-text-without-removing-inner-elements-from-a-parent-element-using

4条答案

按热度按时间

wbgh16ku1#

如果你想删除所有的子文本节点，你可以使用.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级别2规范中找到）。

赞(0）回复(0）举报 5个月前

fcwjkofz2#

这里有一个非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;
}

字符串

赞(0）回复(0）举报 5个月前

eblbsuwk3#

试试这个：