Question

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 & thus update the number shown in the span, (done with something on these lines .each(fu..(){ p append ‘<span>’+ this.length ..)

Let’s say something like this:

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

Have made all the spans uneditable in order to protect the spans and the text, on hitting return a new <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.

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.

Answer 1

I hope that’s the effect you’re looking for: http://jsfiddle.net/AwKkB/

JS

$('span').click(function () {
    var parent = $(this).parent(), container = parent.parent();
    $(this).remove();    
    if (container.children().length > 1) {
        if (parent[0] === container.children()[0]) {
            $(container.children()[1]).prepend(parent.text());
        } else {
            parent.prev().append(parent.text());
        }
    }
    parent.remove();
});

HTML

<div contenteditable="true" style="width: 180px">
<p>abc<span contenteditable="false" style="position:absolute;right:0em;background: red;">3</span></p>
<p>defg<span contenteditable="false" style="position:absolute;right:0em;background: red;">4</span></p>
<p>hijklm<span contenteditable="false" style="position:absolute;right:0em;background: red;">6</span></p>
<p>nopqrs<span contenteditable="false" style="position:absolute;right:0em;background: red;">6</span></p>
</div> 

Best regards!