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 March 2017.

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

js
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.

html
<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>
js
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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
removeAllRanges

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also