Merge two paragraphs together and deleting an element in middle
<p>I have a div contentEditable with paragraphs and appended after each p is a span telling me the length of the paragraph the user can edit the line &amp; thus update the number shown in the span, (done with something on these lines .each(fu..(){ p append '&lt;span>'+ this.length ..)</p>

<p>Let's say something like this:</p>

<pre><code>&lt;div contenteditable="true"&gt;
&lt;p&gt;abc&lt;span contenteditable="false" style="position:absolute;right:-2em;backg..."&gt;3&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;abce&lt;span ...&gt;4&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;abcfoo&lt;span ...&gt;6&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;abcbar&lt;span ...&gt;6&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt; 
</code></pre>

<p>Have made all the spans uneditable  in order to protect the spans and the text, on hitting return a new &lt;p> is created on the next line - all sparky! However I have no way of deleting a new paragraph as the back button on the first letter of a p acts as the browser back button! because its hitting the non editable span.</p>

<p>So I would like to add a button (perhaps on the span) which when clicked will 1. remove the span (not too difficult), 2. merge the 2 paragraphs together.</p>
