Question

I have a contenteditable div. Inside, I have put a ‘fraction’ span, with regards to this link. Here’s my current code (the numbers in the spans are just dummy numbers):

<span style="display:inline-block; vertical-align:middle;" contenteditable="false">
  <span style="display:block; min-width: 20px;border-bottom:1px solid black; text-align: center; outline: none;" contenteditable>6</span>
  <span style="display:block; min-width: 20px;text-align: center;outline: none;" contenteditable>7</span>
</span>

My problem is, when I try to delete this ‘fraction’ span (the outer span, and it should be deletable, as this is a Maths WYSIWYG Program), it just removes the content of the two inner contenteditable spans. When I try to delete it (obviously from outside the outer span but inside the contenteditable div), I want all three elements to get removed. I don’t want the outer span still lingering.

Any solutions?

UPDATE: If there is no way to do this, is there a way to select that whole span element and its contents when the user presses the delete key next to the big fraction span?

Answer 1

Just provide the top span with an id:

<span id="editfraction" 
      style="display:inline-block; vertical-align:middle;" 
      contenteditable="false">

and use this to delete it:

$('#editfraction').remove();

If you want to delete the span when the user presses the delete button, use ids, combined with a data attribute on the contentEditable spans.

<span ... data-ondeleteId="#editx" contenteditable>6</span>

See this jsfiddle for an example