K48 K48 - 1 year ago 31
CSS Question

Replace text in a span that also contains other DOM elements

I have a code like this and I need to remove the

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:

<div id="ctl00_PlaceHolderMain_ctl01__ControlWrapper_RichHtmlField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl00_PlaceHolderMain_ctl01_label">
<span> &#8203;
<div class="cg-division-intro-outer">
<div class="cg-division-intro-inner">
<div class="cg-division-intro-header">
<h1>Division Intro</h1>

... etc

Notice that the
entities are inserted as bare text, not wrapped into any element, so I cannot target them directly.

Here is what I tried:

  1. Using
    visibility: hidden
    on the element containing the garbage and visibility: visible on my code. Has no effect.

  2. Reducing
    on the parent element containing the garbage to 0px and restoring the font-size on other elements. Has no effect.

  3. Obtaining the
    of the parent element, doing the
    and reinserting HTML back into the page - but then all the nodes will be lost/recreated, which means any attached listeners may be lost.

  4. Tried using :not but didn't come up with a solution that works.

Here is the white bar created by those

enter image description here

Answer Source



use childNodes and change its value by nodeValue

var d = document.getElementById('div1').childNodes[0];
d.nodeValue = "new text"; // change value

// if you want to remove the element


<div id="div1">
  some texts
  <div id="div2">
    other elements