Question

我有：

<div>
    Here
    <a href="#"> is </a>
    <p> Text, that I want to </p>
    be removed
</div>

我想：

<div>
    <a href="#"> </a>
    <p> </p>
</div>

删除所有文本的最简单方法是什么，但保留HTML结构？

Answer 1

您可以创建一个函数/插件，它将递归顶级元素中的元素，删除找到的任何文本节点：

{{1}}

JSFiddle

<强>参考：

Answer 2

普通的javascript，递归解决方案：

function removeAllText(element) {

    // loop through all the nodes of the element
    var nodes = element.childNodes;

    for(var i = 0; i < nodes.length; i++) {

        var node = nodes[i];

        // if it's a text node, remove it
        if(node.nodeType == Node.TEXT_NODE) {

            node.parentNode.removeChild(node);


            i--; // have to update our incrementor since we just removed a node from childNodes

        } else

        // if it's an element, repeat this process
        if(node.nodeType == Node.ELEMENT_NODE) {

            removeAllText(node);

        }
    }
}

使用它像：

var thing = document.getElementById('thing');
removeAllText(thing);

很简单

Answer 3

显然，您想要从元素中删除所有文本节点。您可以使用jQuery.contents功能访问文本节点。而且你不需要任何递归。 jQuery为你做到了：

＆＃13;

$(function() {
  $("#to-clean, #to-clean *")                  // selects the element and all element nodes inside it
    .contents()                                // selects all child nodes including tags, comments and text
    .filter(function() {
      return this.nodeType === Node.TEXT_NODE; // filter text nodes
    }).remove();                               // boom!
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="to-clean">
  Here
  <a href="#"> is </a>
  <p>Text, that I want to</p>
  be removed
</div>

＆＃13;

Answer 4

另一种方法，仅用于娱乐和学习目的。尝试不使用本机JS函数，检查元素属性......令人惊讶的是，它可以工作。

clones=[];

$('div').children().each(function() {

clones.push($(this).clone().text(''));
});

$('div').empty();

for(i=0;i<clones.length;i++) {

 clones[i].appendTo('div');
}

JQuery并不将纯文本节点视为容器的子元素，因此我们也可以使用此行为。

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

Answer 5

function RemoveText(el){
   el.children().each(function(){
     var $this = $(this);
     if ($this.children().length > 0){
       $this.children().each(RemoveText($this));
     }
     else{
       $this.text("");
     }     
   });
}

Answer 6

尝试：

function empty(e) {
    var childs = e.children;
    for(var i=0;i<childs.length;i++) {
        if(childs[i].children.length!=0) {
            childs[i].innerHTML=" ";
        } else {
            empty(childs[i]);
        }
    }
}

Answer 7

使用jquery .empty（）方法

https://api.jquery.com/empty/＆lt;＆lt; jiery的api参考

示例：

<!--input-->
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

$( ".hello" ).empty();

<!--result-->
<div class="container">
  <div class="hello"></div>
  <div class="goodbye">Goodbye</div>
</div>

从HTML div中删除所有文本内容，但保留HTML标记和结构

7 个答案: