Selection.deleteFromDocument() — Methode · JavaScript-Referenz

Signatur

Selection.prototype.deleteFromDocument()

Beschreibung

deleteFromDocument() löscht den vom Benutzer oder per Skript markierten Inhalt direkt aus dem Dokument. Intern entspricht der Aufruf selection.getRangeAt(0).deleteContents(). Textknoten werden dabei an den Grenzen gekürzt, vollständig enthaltene Elemente werden entfernt.

Die Methode ist nützlich für eigene Editor-Funktionen, z. B. eine Schaltfläche „Markierung löschen“, oder um in Lern- und Testwerkzeugen gezielt Teile eines Dokuments zu entfernen. Anders als das Löschen per Tastatur in einem contenteditable-Bereich funktioniert sie auch bei Inhalten, die nicht bearbeitbar sind.

Nach dem Löschen ist die Auswahl eingeklappt (isCollapsed === true), der Cursor steht an der Stelle, an der der entfernte Inhalt war. Ist die Auswahl leer oder bereits eingeklappt, passiert nichts.

Beispiele

Markierten Text per Schaltfläche löschen

// HTML: <p id="text">Hallo schöne Welt</p><button id="del">Markierung löschen</button>
const button = document.querySelector('#del');

// mousedown verhindern, damit der Klick die Auswahl nicht aufhebt
button.addEventListener('mousedown', (e) => e.preventDefault());

button.addEventListener('click', () => {
  const selection = window.getSelection();
  if (!selection || selection.isCollapsed) {
    console.log('Nichts markiert');
    return;
  }
  selection.deleteFromDocument();
  console.log(document.querySelector('#text').textContent);
});

Hallo Welt (wenn „schöne “ markiert war)

Programmatisch Bereich auswählen und löschen

// HTML: <p id="satz">JavaScript ist wirklich toll</p>
const textNode = document.querySelector('#satz').firstChild;
const range = document.createRange();
range.setStart(textNode, 14); // vor "wirklich "
range.setEnd(textNode, 23);   // nach "wirklich "

const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

selection.deleteFromDocument();
console.log(textNode.textContent);
console.log(selection.isCollapsed);

JavaScript ist toll true

Gelöschten Inhalt vorher sichern (Rückgängig-Puffer)

const undoBuffer = [];

const deleteWithBackup = () => {
  const selection = window.getSelection();
  if (!selection.rangeCount || selection.isCollapsed) return;
  const fragment = selection.getRangeAt(0).cloneContents();
  undoBuffer.push(fragment);
  selection.deleteFromDocument();
  console.log(`Gesichert: "${fragment.textContent}"`);
};

document.addEventListener('keydown', (e) => {
  if (e.key === 'Delete' && e.altKey) deleteWithBackup();
});

Gesichert: "markierter Text"

// Wichtig · Fallstricke

Kein Undo: Die Änderung landet nicht im nativen Rückgängig-Verlauf des Browsers (Strg+Z). Wer das braucht, sichert den Inhalt selbst, z. B. mit cloneContents().
Auswahl geht bei Klick verloren: Ein Klick auf einen Button kann die Markierung aufheben, bevor der Handler läuft. Mit preventDefault() im mousedown-Handler vermeiden.
Formularfelder: Markierungen in <input> und <textarea> werden nicht erfasst; dort setRangeText('') bzw. selectionStart/selectionEnd nutzen.
Mehrere Bereiche: Nur Firefox unterstützt mehrere Ranges pro Auswahl; die Spezifikation und andere Browser berücksichtigen nur den ersten Bereich.
Das Löschen kann leere Elemente oder aufgetrennte Textknoten hinterlassen; ggf. anschließend Node.normalize() aufrufen.
Kompatibilität: Unterstützt in allen modernen Browsern (Chrome, Edge, Firefox, Safari).

Siehe auch

Selection RestrictionTarget.fromElement() Selection.getRangeAt() Selection.selectAllChildren() Selection.setBaseAndExtent()