如何从节点中删除文本？

Question

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

Now I know I can easily clear #blah from all content:

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

But I only want to get rid of all text (in this case Lorem ipsum... ) I do not want to get rid of the image nor of the span nor of the text of the span.

Lorem was likely inserted into this div via document.getElementById('blah').appendChild(document.createTextNode('Lorem...'))

Answer 1

This solution is super brittle and I don't honestly recommend it, but if your html is exactly that format always then this does work.

 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

You can use nextsibling to target the text node and remove it.

 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> 

Answer 3

 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>