JQuery удаляет внутренний текст, но сохраняет html

Question

У меня есть что-то вроде этого.

<div id="firstDiv"> 
    This is some text 
    <span id="firstSpan">First span text</span> 
    <span id="secondSpan">Second span text</span> 
</div> 

Я хочу, чтобы удалить «Это некоторый текст» и нуждаются в HTML-элементы нетронутыми.

Я пытался использовать что-то вроде

$("#firstDiv") 
    .clone() //clone the element 
    .children() //select all the children 
    .remove() //remove all the children 
    .end() //again go back to selected element 
    .text(""); 

Но это не сработало.

Есть ли способ, чтобы получить (и, возможно, удалить, через что-то вроде .text("")) только свободный текст в теге, а не текст в его дочерних тегов?

Спасибо очень много.

Answer 1

проверить это fiddle

Предположим, у вас есть этот HTML

<parent> 
    <child>i want to keep the child</child> 
    Some text I want to remove 
    <child>i want to keep the child</child> 
    <child>i want to keep the child</child> 
</parent> 

Затем вы можете удалить внутренний текст родителя, как это :

var child = $('parent').children('child'); 
$('parent').html(child); 

Проверить это fiddle для решения вашей HTML

var child = $('#firstDiv').children('span'); 
$('#firstDiv').html(child); 

PS: Имейте в виду, что любые обработчики событий ограничены на что DIV будут потеряны, как удалить, а затем воссоздать элементы

Answer 2

Отфильтровать текстовые узлы и удалить их:

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

FIDDLE

Чтобы фильтровать на сам текст, вы можете сделать:

$('#firstDiv').contents().filter(function() { 
    return this.nodeType === 3 && this.nodeValue.trim() === 'This is some text'; 
}).remove(); 

и получить текст:

var txt = []; 

$('#firstDiv').contents().filter(function() { 
    if (this.nodeType === 3) txt.push(this.nodeValue); 
    return this.nodeType === 3; 
}).remove(); 

Answer 3

Зачем пытаться заставить JQuery сделать это, когда это проще с ванильным JS:

var div = document.getElementById('firstDiv'), 
    i, 
    el; 

for (i = 0; i< div.childNodes.length; i++) { 
    el = div.childNodes[i]; 
    if (el.nodeType === 3) { 
     div.removeChild(el); 
    } 
} 

Fiddle здесь: http://jsfiddle.net/YPKGQ/

Answer 4

Проверьте это, не уверен, если это то, что вы хотите точно ... Примечание: я проверил его только в хроме

http://jsfiddle.net/LgyJ8/

cleartext($('#firstDiv')); 

function cleartext(node) { 

    var children = $(node).children(); 
    if(children.length > 0) { 

     var newhtml = ""; 
     children.each(function() { 

      cleartext($(this)); 

      newhtml += $('<div/>').append(this).html(); 

     }); 

     $(node).html(newhtml); 

    } 
}