想象一下,我有以下内容(从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”而不影响任何子元素。
答案 0 :(得分:27)
如果要删除所有子文本节点,可以使用.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中找到)。
答案 1 :(得分:10)
这是一个非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;
}
答案 2 :(得分:7)
答案 3 :(得分:2)
你可以使用它。
$("#foo").html($("#foo").children());