title: Replace text in a span that also contains other DOM elements
body: <p>I have a code like this and I need to remove the <code>&amp;#8203;</code> characters that are inserted automatically by the code that I have no control over (generated by SharePoint). They ruin the layout by inserting extra empty lines: </p>
  
  <pre><code>&lt;div id="ctl00_PlaceHolderMain_ctl01__ControlWrapper_RichHtmlField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl00_PlaceHolderMain_ctl01_label"&gt;
      &amp;#8203;&amp;#8203;&amp;#8203;
          &lt;span&gt;                            &amp;#8203;
            &lt;div class="cg-division-intro-outer"&gt;
              &lt;div class="cg-division-intro-inner"&gt;
                  &lt;div class="cg-division-intro-header"&gt;
                      &lt;h1&gt;Division Intro&lt;/h1&gt;
                  &lt;/div&gt;
  
  ... etc
  </code></pre>
  
  <p>Notice that the <code>&amp;#8203;</code> entities are inserted as bare text, not wrapped into any element, so I cannot target them directly. </p>
  
  <p>Here is what I tried: </p>
  
  <ol>
  <li>Using <code>visibility: hidden</code> on the element containing the garbage and visibility: visible on my code. Has no effect. </li>
  <li>Reducing <code>font-size</code> on the parent element containing the garbage to 0px and restoring the font-size on other elements. Has no effect. </li>
  <li>Obtaining the <code>innerHTML</code> of the parent element, doing the <code>.replace()</code> and reinserting HTML back into the page - but then all the nodes will be lost/recreated, which means any attached listeners may be lost. </li>
  <li>Tried using :not but didn't come up with a solution that works.</li>
  </ol>
  
  <p>Here is the white bar created by those <code>&amp;#8203;</code>s: </p>
  
  <p><a href="https://i.stack.imgur.com/piTem.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/piTem.png" alt="enter image description here"></a></p>