如何使用jquery从父元素中删除文本(不删除内部元素）

How to remove text (without removing inner elements) from a parent element using jquery

本文关键字：删除 元素 文本 内部 何使用 jquery      更新时间：2024-01-22

想象一下，我有如下内容（修改自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"answers"third"。

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

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

试试这个：

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

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

您可以使用它。

$("#foo").html($("#foo").children());​
相关文章：