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

假设我有如下内容（修改自）

第一
跳过一只懒狗！
第二
另一只跳过一只懒狗！
第三

如何在不影响任何子元素的情况下从DOM中删除（仅文本）“first”、“second”和“third”

试试这个：

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

---

演示：

如果要删除所有可使用的子文本节点，然后将匹配集减少为仅文本节点：

$("#foo").contents().filter(function () {
     return this.nodeType === 3; 
}).remove();​​​​​​​

这是一个例子

注意：这将保留子元素上的任何现有事件处理程序，而使用

.html（）

进行应答则不行（因为这些元素将从DOM中删除并重新添加）

注2：一些链接问题的答案显示的代码与我这里的答案类似，但它们使用

nodeType

常量（例如

返回this.nodeType==Node.TEXT\u Node

）。这是一种糟糕的做法，因为低于版本9的IE没有实现

节点

属性。使用整数（可在中找到）更安全。

您可以使用此选项

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

---

这是一个非jQuery版本，它可以在所有主流浏览器上运行，可以追溯到IE5，只是为了演示没有jQuery的生活是多么的不平凡

演示：

代码：

---

或者这里回答了所有链接问题中的答案都是完全错误的，导致不必要的问题，例如丢失事件处理程序，或者在某些浏览器中出现中断（例如使用

节点类型

常量）。在这种情况下，糟糕的

.html

解决方案不会删除处理程序（或者可能会删除），但这只是偶然的，因为

.html

也可以插入节点（尽管没有文档记录）。编辑：好的，因为

.html

@Esailija中的隐式

.empty（）

，他们肯定会删除处理程序-使用mgraph答案中的代码似乎会删除事件处理程序：那么3实际上指的是什么？查看Dom level 2规范，我没有看到以任何方式按数字列出的节点类型。我很好奇：）@JamieHutber-它们都是用数字列出的。看见看起来我的链接搞乱了，所以它链接到了文档的一些随机的其他部分。如果你的浏览器（特别是WebKit）中出现了非法错误，请查看这个问题的公认答案，以获得你的答案：@JamieHutber:别担心，一切都会好的。

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

var el = document.getElementById("foo"), child = el.firstChild, nextChild;

while (child) {
    nextChild = child.nextSibling;
    if (child.nodeType == 3) {
        el.removeChild(child);
    }
    child = nextChild;
}