Range: deleteContents()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

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

js
deleteContents()

Parameter

Keine.

Rückgabewert

Keiner (undefined).

Beispiele

Verwendung von deleteContents()

Wählen Sie einen Text aus, der möglicherweise mehrere Absätze umfasst, und klicken Sie dann auf die Schaltfläche, um den ausgewählten Text zu löschen. Öffnen Sie Ihren DOM-Inspektor, um die aktualisierte DOM-Struktur zu überprüfen.

html
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<button id="delete">Delete selected text</button>
<button id="reset">Reset</button>
js
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();
});

Spezifikationen

Specification
DOM
# dom-range-deletecontents

Browser-Kompatibilität

Siehe auch