Удалить текст в DIV только, но не в дочерних элементах - НЕ Jquery

Question

Так у меня есть следующие настройки:

<div class='topDiv'> 
     SomeText 
     <span>ChildText</span> 
     OtherText 
     <span>ChildText</span> 
     DifferentText 
    </div> 

Как удалить текст «SOMETEXT», «othertext» и «DifferentText» в JavaScript (а не JQuery), не удаляя дочерний текст. Установка innerHTML = ""; удаляет содержимое, используя JQuery .text() или JavaScript .textContent = ""; тоже не работает.

Я посмотрел на первый ответ ниже, но это будет возвращать только первый SOMETEXT (то, что я действительно искал что-то, что бы удалить или выделить весь текст topDiv синь, не влияя на пролеты.

текст не может быть скрыто либо, он должен быть удален

Спасибо за любую помощь!

Answer 1

Попробуйте это ...

elementToRemove = document.getElementById("topDiv").firstChild; 
document.getElementById("topDiv").removeChild(elementToRemove); 

Answer 2

Вы со пакетирования хранить DOM элементы, извлекаемые с .children, снимите .innerHTML в DIV, и повторное добавление дочерних элементов:

var div = document.querySelector(".topDiv"); 
 
var children = []; 
 
for(var i=0; i<div.children.length; i++) { 
 
    children.push(div.children[i]); 
 
} 
 

 
div.innerHTML = ""; 
 
children.forEach(function(item) { 
 
    div.appendChild(item); 
 
});

<div class='topDiv'> 
 
    SomeText 
 
    <span>ChildText</span> 
 
    <span>ChildText</span> 
 
</div>