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

【问题标题】：How to remove text (without removing inner elements) from a parent element using jquery如何使用 jquery 从父元素中删除文本（不删除内部元素）
【发布时间】：2012-07-24 14:56:47
【问题描述】：

想象一下我有类似下面的东西（修改自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 中仅删除（仅文本）“第一”、“第二”和“第三”。

【问题讨论】：

stackoverflow.com/questions/2715167/… 或 stackoverflow.com/questions/3442394/…
这里有答案stackoverflow.com/questions/6388507/…
所有链接问题的答案要么完全错误，要么导致不必要的问题，例如丢失事件处理程序，或者在某些浏览器中中断（例如使用nodeType 常量）。

标签： javascript jquery

【解决方案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 中找到）。

【讨论】：

可怕的.html 解决方案在这种情况下不会删除处理程序（或者他们可能会这样做？），但这只是偶然，因为.html 也可以插入节点（虽然没有记录）。编辑：好的，由于.html 中隐含的.empty()，他们肯定会删除处理程序
@Esailija - 使用 mgraph 答案中的代码似乎删除了事件处理程序：jsfiddle.net/jamesallardice/PXxC4/1
那么 3 实际上指的是什么？查看 Dom 2 级规范，我看不到任何按数字列出的节点类型。我很好奇:)
@JamieHutber - 它们用数字列出。见this section。看起来我的链接搞砸了，所以它链接到文档的其他一些随机部分。
如果您的浏览器（尤其是 WebKit）出现非法错误，请查看该问题的已接受答案以获取答案：stackoverflow.com/questions/4404526/…

【解决方案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;
}

【讨论】：

@JamieHutber：别担心，一切都会好的。

【解决方案3】：

试试这个：

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

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

【讨论】：

【解决方案4】：

你可以用这个。

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

【讨论】：