Selection: removeAllRanges() 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 Selection.removeAllRanges() method removes all ranges from the selection, leaving the anchorNode and focusNode properties equal to null and nothing selected. When this method is called, a selectionchange event is fired at the document.
Note: This method is an alias for the Selection.empty() method.
Syntax
removeAllRanges() Parameters
None.
Return value
None (undefined).
Examples
This example displays a message when something is selected on the page or not. It does this by listening to the selectionchange event on the document. There also is a button that clears any selection by calling Selection.removeAllRanges(). When this happens, the selection is changed and the message is updated.
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet urna eget sapien venenatis, eget facilisis diam mattis. </p> <button>Clear selection</button> <pre id="log"></pre> const log = document.getElementById("log"); // The selection object is a singleton associated with the document const selection = document.getSelection(); // Logs if there is a selection or not function newSelectionHandler() { if (selection.rangeCount !== 0) { log.textContent = "Some text is selected."; } else { log.textContent = "No selection on this document."; } } document.addEventListener("selectionchange", () => { newSelectionHandler(); }); newSelectionHandler(); // The button cancel all selection ranges const button = document.querySelector("button"); button.addEventListener("click", () => { selection.removeAllRanges(); }); Specifications
| Specification |
|---|
| Selection API # dom-selection-removeallranges |
Browser compatibility
Loading…