Как удалить текст (без удаления внутренних элементов) из родительского элемента с помощью jquery

Представьте, что у меня есть что-то вроде следующего (изменено с http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/)

<div id="foo">
    first
    <div id="bar1">
        jumps over a lazy dog!
    </div>
    second
    <div id="bar2">
        another jumps over a lazy dog!
    </div>
    third
</div>

Как я могу удалить только (только текст) "первый", "второй" и "третий" из DOM, не затрагивая ни одного из дочерних элементов.

Ответы

Ответ 1

Если вы хотите удалить все дочерние текстовые узлы, вы можете использовать .contents(), а затем .filter(), чтобы уменьшить соответствие набора только текстовым узлам:

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

Здесь рабочий пример.

Примечание. Это сохранит любые существующие обработчики событий в дочерних элементах, ответы на которые с помощью .html() не будут выполняться (поскольку элементы удаляются из DOM и добавляются обратно).

Примечание 2. Ответы по некоторым связанным вопросам показывают в моем ответе аналогичный код, но они используют константы nodeType (например, return this.nodeType === Node.TEXT_NODE). Это плохая практика, поскольку IE ниже версии 9 не реализует свойство Node. Безопаснее использовать целые числа (которые можно найти в спецификации уровня 2 DOM).

Ответ 2

Здесь версия, отличная от jQuery, которая работает во всех основных браузерах в IE 5, просто для того, чтобы продемонстрировать, насколько небезопасна жизнь без jQuery.

Демо: http://jsfiddle.net/timdown/aHW9J/

код:

var el = document.getElementById("foo"), child = el.firstChild, nextChild;

while (child) {
    nextChild = child.nextSibling;
    if (child.nodeType == 3) {
        el.removeChild(child);
    }
    child = nextChild;
}

Ответ 3

попробуйте следующее:

$("#foo").html($("#foo").find("div"));

demo: http://jsfiddle.net/PXxC4/

Ответ 4

Вы можете использовать это.

$("#foo").html($("#foo").children());