Удалить весь текст в родительском div - сохранить строку в дочерних

Question

Мне нужно удалить весь текст внутри div - но не уверены, как это сделать правильно с jQuery или vanilla JS. Сначала я думал об использовании пустого, но это также удаляло строку моего ребенка.

Каков правильный способ сделать это? Строкой, которую я хочу удалить, является строка totaal:. Это динамический текст, поэтому я не могу указать точное слово.

<span id="span2">Totaal: <em id="headercartsum">€925</em></span> 

Answer 1

В этом случае, если вы хотите, чтобы удалить первый дочерний узел span элемент, поэтому вы можете сделать

$('#span2').contents().eq(0).remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span id="span2">Totaal: <em id="headercartsum">€925</em></span>

---

или если вы хотите, чтобы удалить все текстовые узлы дети, то

$('#span2').contents().filter(function() { 
 
    return this.nodeType == Node.TEXT_NODE; 
 
}).remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span id="span2">Totaal: <em id="headercartsum">€925</em></span>

---

на основе класса em.

$('.headercartsum').map(function() { 
 
    return this.previousSibling; 
 
}).remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span id="span2">Totaal: <em id="headercartsum" class="headercartsum">€925</em></span>

Answer 2

Вы можете выбрать текстовый узел с помощью NODETYPE собственности вместе с .remove(), чтобы удалить его:

$('#span2').contents().filter(function() { 
    return this.nodeType === 3; //select text node 
}).remove(); 

Working Demo

Answer 3

Что-то вроде этого:

$('#span2').html($('#span2>*')); 

https://jsbin.com/boyebeyaxe/edit?html,js,output

Answer 4

Выберите непосредственные дочерние элементы и сделать их только содержание:

$(document).ready(function() { 
    $("#span2").html($("#span2").children()); 
}) 

http://jsfiddle.net/kffj63zh/