Как очистить текст в узле до начала вложенного тега?

Question

[kirillleogky]

Есть к примеру код:

<div id="news">
  <h1 id="firstElem">Срочно в номер!<h2 id="secondElem">Марсиане атаковали человечество!</h2></h1>
</div>

Как можно удалять текст именно в id="firstElem" не трогая текст в id="secondElem" учитывая то что размер текста в id="firstElem" будет изменяться?

Что я имею ввиду:
Из этого:

<div id="news">
  <h1 id="firstElem">Срочно в номер!<h2 id="secondElem">Марсиане атаковали человечество!</h2></h1>
</div>

В это:

<div id="news">
  <h1 id="firstElem"><h2 id="secondElem">Марсиане атаковали человечество!</h2></h1>
</div>

Или из этого:

<div id="news">
  <h1 id="firstElem">Срочно завтра в номер!<h2 id="secondElem">Марсиане атаковали!</h2></h1>
</div>

В это:

<div id="news">
  <h1 id="firstElem"><h2 id="secondElem">Марсиане атаковали!</h2></h1>
</div>

Answer 1

[Stockholm Syndrome]

document.querySelector('#firstElem').childNodes.forEach((n) => n.nodeType === document.TEXT_NODE && n.remove());