Как удалить текст из узла?

Question

<div id="blah">
    <img src="yadda.svg" />
    <span>
        Text of great importance
    </span>
    Lorem ipsum dolor sit amet
</div>

Теперь я знаю, что могу легко очистить #blah от всего содержимого:

for (let node of Array.from(document.getElementById('blah').childNodes))) node.remove()

Но я хочу избавиться только от всего текста (в данном случае Lorem ipsum...) Я не хочу избавляться ни от изображения, ни от промежутка, ни от текста промежутка.

Lorem, вероятно, был вставлен в этот div через document.getElementById('blah').appendChild(document.createTextNode('Lorem...'))

Answer 1

Это решение очень хрупкое, и я честно не рекомендую его, но если ваш html всегда точно такой формат, тогда это работает.

const wrapper = document.querySelector('#blah');

const stripped = Array.from(wrapper.children).reduce((a, c) => a + c.outerHTML, '');

wrapper.innerHTML = stripped;

<div id="blah">
    <img src="yadda.svg" />
    <span>
        Text of great importance
    </span>
    Lorem ipsum dolor sit amet
</div>

Answer 2

var btn = document.getElementById('btn');

btn.addEventListener('click', function(e) {
  var blahElem = document.getElementById('blah');
  var content = ''; 
  for(var i=0;i<blahElem.childElementCount;i++){
    content += blahElem.children[i].outerHTML;
  }
  blahElem.innerHTML = content;
});

<div id="blah">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" />
  <span>
        Text of great importance
    </span> Lorem ipsum dolor sit amet
</div>

<br/>
<hr/>
<button id="btn">remove 'Lorem ipsum'</button>

Answer 3

Вы можете использовать nextsibling для нацеливания на текстовый узел и удаления его.

document.querySelector('#blah > span').nextSibling.remove()

<div id="blah">
    <img src="yadda.svg" />
    <span>
        Text of great importance
    </span>
    Lorem ipsum dolor sit amet
</div>