Range: deleteContents()-Methode

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die Range.deleteContents()-Methode entfernt alle vollständig ausgewählten Knoten innerhalb dieses Bereichs aus dem Dokument. Bei den teilweise ausgewählten Knoten am Anfang oder Ende des Bereichs wird nur der ausgewählte Teil des Textes gelöscht, während der Knoten selbst intakt bleibt. Anschließend wird der Bereich bis zum Ende des letzten ausgewählten Knotens zusammengeklappt.

<p>paragraph 1</p><p>paragraph 2</p><p>paragraph 3</p>
       ^----------- selection ------------^

deleteContents() returns:

<p>para</p><p>graph 3</p>

Im Gegensatz zu Range.extractContents() gibt diese Methode kein DocumentFragment zurück, das den gelöschten Inhalt enthält.

Syntax

deleteContents()

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<button id="delete">Delete selected text</button>
<button id="reset">Reset</button>

const button = document.getElementById("delete");
const reset = document.getElementById("reset");
const output = document.getElementById("output");

button.addEventListener("click", () => {
  const range = document.getSelection().getRangeAt(0);
  range.deleteContents();
});

reset.addEventListener("click", () => {
  window.location.reload();
});