¿Cómo eliminar todo el elemento del tramo con tramos contenibles dentro de él?

Tengo una div . En el interior, he puesto un lapso de ‘fracción’, con respecto a este enlace . Aquí está mi código actual (los números en los tramos son solo números ficticios):

  6 7  

Mi problema es que, cuando bash eliminar este tramo de ‘fracción’ (el tramo externo, y debe ser eliminable, ya que este es un progtwig WYSIWYG de Matemáticas), simplemente elimina el contenido de los dos tramos interiormente satisfactorios. Cuando bash eliminarlo (obviamente desde fuera del tramo externo pero dentro del div contenteditable), quiero que se eliminen los tres elementos. No quiero que el espacio exterior aún persista.

Alguna solución?

ACTUALIZACIÓN: si no hay forma de hacerlo, ¿hay alguna manera de seleccionar ese elemento completo y su contenido cuando el usuario presiona la tecla Eliminar al lado del tramo de la fracción grande?

Solo proporcione el tramo superior con una identificación:

  

y usa esto para eliminarlo:

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

Si desea eliminar el lapso cuando el usuario presiona el botón Eliminar, use los identificadores, combinados con un atributo de datos en los tramos de contentEditable.

 6 

Vea este jsfiddle para un ejemplo