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

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

<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("")) только свободный текст внутри тега, а не текст в его дочерних тегах?

Большое спасибо.

Ответы

Ответ 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, будут потеряны при удалении, а затем воссоздают элементы

Ответ 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();

Ответ 3

Зачем пытаться заставить jQuery делать это, когда проще с vanilla 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);
    }
}

Заклинание здесь: http://jsfiddle.net/YPKGQ/

Ответ 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);

    }
}