Range: deleteContents() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The Range.deleteContents() method removes all completely-selected nodes within this range from the document. For the partially selected nodes at the start or end of the range, only the selected portion of the text is deleted, while the node itself remains intact. Afterwards, the range is collapsed to the end of the last selected node.
<p>paragraph 1</p><p>paragraph 2</p><p>paragraph 3</p>
^----------- selection ------------^
deleteContents() returns:
<p>para</p><p>graph 3</p>
Unlike Range.extractContents(), this method does not return a DocumentFragment containing the deleted content.
Syntax
deleteContents()
Parameters
None.
Return value
None (undefined).
Examples
Using deleteContents()
Select some text, possibly spanning multiple paragraphs, and then click the button to delete the selected text. Open your DOM inspector to check the updated DOM structure.
<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();
});
Specifications
| Specification |
|---|
| DOM # dom-range-deletecontents |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
deleteContents
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support