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

IT技术 javascript jquery
2021-01-13 17:52:50

想象一下，我有如下内容（修改自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个回答

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

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

这是一个非 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：别担心，一切都会好的。
2021-04-10 17:52:50

试试这个 ：

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

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

你可以用这个。

$("#foo").html($("#foo").children());​
其它你可能感兴趣的问题
上一篇在 react-router v4 中获取路径参数 下一篇带有小数和千位分隔符的数字的正则表达式