So löschen Sie ganze span-Elements mit contenteditable umfasst drin?

Ich habe eine contenteditable div. Innen habe ich einen 'Bruchteil' span, mit Bezug auf dieser link. Hier ist meine aktuelle code (die zahlen in den Spannweiten sind nur dummy-zahlen):

<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>

Mein problem ist, wenn ich versuche zu löschen, dieser 'Bruchteil' span (des äußeren erstrecken, und es sollte gelöscht werden, denn dies ist ein Mathe-WYSIWYG-Programm), es entfernt nur die Inhalte der beiden inneren contenteditable überspannt. Wenn ich versuche es zu löschen (natürlich von außerhalb des äußeren erstrecken, aber innerhalb der contenteditable div -), ich möchte, dass alle drei Elemente entfernt werden. Ich will nicht die äußere Spannweite noch zu Verweilen.

Irgendwelche Lösungen?

UPDATE: Wenn es keine Möglichkeit gibt, dies zu tun, gibt es eine Möglichkeit zu wählen, dass die gesamte span-element und seinen Inhalt, wenn der Benutzer drückt die entf-Taste neben der großen Bruchteil span?

  • Könntest du zeigen, was du versucht hast? Oder zumindest ein bisschen von js, um besser zu verstehen, Ihr Problem?
  • Nein, es ist eigentlich ganz einfach - ich bin versucht zu erstellen, eine Mathe-WYSIWYG-Programm, wie oben erwähnt, und ich bin fest auf dem Teil, wo, nachdem ein Benutzer erstellt ein 'Bruchteil', haben Sie Schwierigkeiten, es zu löschen.
InformationsquelleAutor Lucas - Better Coding Academy | 2012-08-29
  1. 3

    Nur die top-span mit der id":

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

    und verwenden Sie diese, um es zu löschen:

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

    Wenn Sie möchten, löschen Sie die Zeitspanne, wenn der Benutzer drückt die Schaltfläche löschen, verwenden Sie ids, kombiniert mit einem data-Attribut auf die contentEditable überspannt.

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

    Sehen dieses jsfiddle für ein Beispiel

    • ja, aber eigentlich ist es die Benutzer zu löschen (sorry das ich die meisten Hilfspersonal nicht deutlich), und Sie können auch einfügen, mehrere Fraktionen, so dass die meisten wahrscheinlich, wird es nicht funktionieren.
    • Hi @think123: ich gekocht bis ein jsfiddle, siehe editierte Antwort. Ist es das, was du meintest?
    • Warten Sie, ich kann Sie nicht verstehen. Wie verwende ich deinen code?
    • ändern Sie einfach die Werte in der rechten unteren panel und drücken Sie die entf-Taste
    • +1 ach ja, ich sehe. Jetzt nur noch eins - Wie kann ich es so machen, drückt der Benutzer löschen, die außerhalb der äußeren Bruchteil Spanne, die Seite wählt automatisch die ganzen äußeren und span einschließlich aller seiner Inhalte für die einfache Entfernung?
    • wenn Sie nicht verstehen, was ich meine, so wie in deinem Beispiel, wenn Sie versuchten zu löschen, die Fraktion ohne auswählen, wird der code automatisch wählen Sie die gesamte Fraktion?
    • Ich denke, das ist eine andere Frage, und ich glaube nicht, dass ich ganz verstehen, was du meinst. Sie können ein Dokument weit delete-Methode, aber was ist, wenn es mehrere Elemente, wie die deine? Versuchen Sie hantieren mit dem code in der gegebenen jsfiddle (ich habe eine zusätzliche editierbare element).
    • lassen Sie uns weiter, diese Diskussion im chat
    • Sorry @think123, ich habe keine Zeit für einen chat in dem moment, haben zu besuchen, um meine Arbeit jetzt.
    • oh, dass ist ok dann. vielen Dank für die Unterstützung aus.

    InformationsquelleAutor KooiInc
Schreibe einen Kommentar