6

我有一些这样的 HTML：

<div>TEXT
    <span>SPAN</span>
        <a href="">LINK</a>
</div>

我想删除元素的内容，通常我会这样做：

$('*').empty();

或者

$('*').contents().empty();

然而，这将删除/清空第一个跨度及其内容，即 div 和链接。在清空元素时我能做些什么来保留它们？所以最终的结果是：

<span>
    <div></div>
    <a href=""></a>
</span>

请注意，我正在寻找可以应用于任何 HTML 的“通用”内容。上面只是一个例子，实际上 HTML 结构会包含更多的数据。

JsFiddle 的示例

4

4 回答 4

3

递归循环遍历所有节点，并删除所有nodeType属性等于 3 ( Node.TEXT_NODE) 的子节点。jQuery 不能只选择文本节点，因此可以使用 vanilla JavaScript 来完成。

例子：

function removeText(node) {
    if (!node || !node.childNodes || !node.childNodes.length) return;
    for (var i=node.childNodes.length-1; i>=0; --i) {
        var childNode = node.childNodes[i];
        if (childNode.nodeType === 3) node.removeChild(childNode);
        else if (childNode.nodeType === 1) removeText(childNode);
    }   
}

或者，打包在一个 jQuery 插件中：

$.fn.removeText = function() {
    for (var i=this.length-1; i>=0; --i) removeText(this[i]);
    return this;
};

http://jsfiddle.net/hcKsX/

于 2013-03-19T21:13:01.140 回答
2

获取父项的子项并设置它们的 html，如下所示：

$('#myspan').children().html('');

jsFiddle

于 2013-03-19T21:13:07.623 回答
1

这些解决方案都可以，但没有一个能满足您的条件。

示例 #1：删除叶节点内的所有文本

$('body *:not(:has(*))').empty()

结果：

<span>SPAN
    <div></div>
    <a href=""></a>
</span>

示例 #2：删除仅一个节点的子节点内的所有文本

$('body span').children().html('')

结果：

<span>SPAN
    <div></div>
    <a href=""></a>
</span>

（同上）。但是，如果嵌套层数超过 2 层，此解决方案将不起作用。

其他解决方案也有类似的缺点。

这里真正的问题是没有好的方法可以从既是父节点又是文本节点的节点中清除文本。你应该要么一起破解一些东西，要么每次都重新渲染你的视图。

于 2013-03-19T21:17:50.873 回答
0

这应该删除 dom 树中的所有文本节点：

$('*').contents().filter(
  function() {
    return this.nodeType == 3;
}).remove();
于 2014-09-04T09:24:24.197 回答