Contenteditable, bizarre behaviour of child elements, and NOT whitespace independent? <p>I've been playing around with <code>contenteditable</code> fields, and have come across an odd behaviour that I cannot figure out.</p> <p>Check out <a href="https://jsfiddle.net/13u00nus/" rel="nofollow noreferrer">fiddle</a> for this particular problem.</p> <p>I have two <em>identical</em> <code>contenteditable</code> divs. Both of them have the same <code>&lt;span&gt;</code> child, followed by a single blank character (otherwise carrot issues ensue). The only difference between the two is that the second div has been "prettified", and made more readable by indenting the <code>&lt;span&gt;</code> on a new line.</p> <pre><code>&lt;div style="margin-bottom: 15px;" contenteditable="true"&gt;&lt;span class="lead" contenteditable="false"&gt;Something something&lt;/span&gt;&amp;#8203;&lt;/div&gt; &lt;div contenteditable="true"&gt; &lt;span class="lead" contenteditable="false"&gt;Something something&lt;/span&gt;&amp;#8203; &lt;/div&gt; </code></pre> <p>Try this in both of the divs...</p> <ol> <li>Place the carrot to the right-end of the content (i.e. after the blank character)</li> <li>Then hit backspace a couple times</li> </ol> <p>You'll notice that in the top (first) <code>contenteditable</code> div, you can delete the <code>&lt;span&gt;</code> element, as though it were one giant character. You should also notice that that in the second div, no amount of backspacing will ever clear it out. At least not in Safari.</p> <p>So what gives!? I thought HTML was whitespace independent - why the difference in behaviour of the two?</p> <p>Viewing the source, they have <em>slightly</em> different markup...</p> <p><a href="https://i.stack.imgur.com/4Qg9l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Qg9l.png" alt="contenteditable source"></a></p> <p>... but it still behooves me as to why there would be any difference.</p> <p>I would like it to be deletable, and so the solution is obviously just to use the former version, but it is still curious as to why this issue exists at all.</p> <p>Also! If you happen to be a <code>contenteditable</code> guru, I've been fighting with another issue <a href="http://stackoverflow.com/questions/37108671/html-css-js-contenteditable-div-with-permanent-leading-content">over here</a>. Any help on that one is welcome!</p>