21

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

4

4 回答 4

31

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

于 2012-07-24T15:01:35.270 回答
13

这是一个非 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;
}
于 2012-07-24T15:34:50.463 回答
7

试试这个 ：

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

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

于 2012-07-24T15:00:55.757 回答
3

你可以用这个。

$("#foo").html($("#foo").children());​
于 2012-07-24T15:03:10.027 回答