Question

我有一些像这样的HTML：

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

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

$('*').empty();

或

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

然而，这将删除/清空第一个范围及其内容，即div和链接。在清空元素时，我该怎么做才能保留元素？所以最终的结果是：

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

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

Example at JsFiddle

Answer 1

递归遍历所有节点，并删除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/

Answer 2

获取父项的子项并设置它们的html：

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

jsFiddle

Answer 3

这些解决方案都可以，但它们都不能满足您的条件。

示例＃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级，则此解决方案将无效。

其他解决方案也有类似的垮台。

这里真正的问题是没有一种好方法可以从一个既是父节点又是文本节点的节点中清除文本。您应该一起破解某些内容或每次重新渲染您的视图。

Answer 4

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

$('*').contents().filter(
  function() {
    return this.nodeType == 3;
}).remove();

删除或清空元素的内容

4 个答案: