Hủy bỏ tất cả các nội dung văn bản từ HTML div nhưng giữ thẻ HTML và cơ cấu

Question

tôi có:

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

Tôi muốn:

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

cách dễ nhất để loại bỏ tất cả các văn bản là gì, nhưng giữ HTML Kết cấu?

Answer 1

Bạn có thể tạo một hàm/plugin sẽ recurse thông qua các yếu tố trong phần tử cấp cao nhất của bạn, loại bỏ bất kỳ nút văn bản tìm thấy:

$.fn.removeText = function(){ 
    this.each(function(){ 

    // Get elements contents 
    var $cont = $(this).contents(); 

     // Loop through the contents 
     $cont.each(function(){ 
     var $this = $(this); 

      // If it's a text node 
      if(this.nodeType == 3){ 
      $this.remove(); // Remove it 
      } else if(this.nodeType == 1){ // If its an element node 
      $this.removeText(); //Recurse 
      } 
     }); 
    }); 
} 

$('#toplevel').removeText(); 

JSFiddle

Tham chiếu:

• .contents()
• .each()
• .remove()

Answer 2

sử dụng jquery .empty) phương pháp (

https://api.jquery.com/empty/ < < api tài liệu tham khảo cho jquery

dụ:

<!--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> 

Answer 3

javascript Plain, giải pháp đệ quy:

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); 

     } 
    } 
} 

Sử dụng nó như:

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

Khá đơn giản

Answer 4

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

Answer 5

Rõ ràng bạn muốn loại bỏ tất cả các nút văn bản từ nguyên tố này. Bạn có thể truy cập các nút văn bản bằng chức năng jQuery.contents. Và bạn không cần bất kỳ đệ quy nào. jQuery nào đó cho bạn:

$(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! 
 
});

<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>

Answer 6

thử:

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

hơn Một phương pháp, chỉ dành riêng cho mục đích vui chơi và học tập. Cố gắng làm điều đó mà không cần sử dụng các hàm JS gốc, kiểm tra các thuộc tính phần tử ... Đáng ngạc nhiên, nó hoạt động.

clones=[]; 

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

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

$('div').empty(); 

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

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

JQuery không tính các nút văn bản thuần túy làm phần tử con của vùng chứa, vì vậy chúng tôi cũng có thể sử dụng hành vi này.

Demo: http://jsfiddle.net/djvhxgm9/