In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > selection and ranges > methods > removeRange (selectionRange)

removeRange method (selectionRange)

Browser support:

9

Removes a Range object from the current selection.

Note: The selectionRange object and its removeRange method are supported in Internet Explorer from version 9.

The selectionRange object represents the current selection and every Range object that belongs to the selectionRange object represents a contiguous part of the selection.

In Internet Explorer, Opera, Google Chrome, Safari and Firefox before version 3, at most one Range can belong to the selectionRange object, because text selection is always a contiguous part of the DOM hierarchy.
In Firefox from version 3, multiple areas of text can be selected by holding down the CTRL key while selecting.

You can add ranges to the current selection with the addRange method, and remove them with the removeRange and removeAllRanges methods. To get the Range objects use the getRangeAt method, and the rangeCount property to get their count.
Since only Firefox supports more than one range for the selection, in other browsers, the addRange method does not add new ranges to the selection if it already contains one.

In older Internet Explorer versions (and optionally in newer ones as well), use the empty method of the selection object to cancel the current selection.

Syntax:

object.removeRange (rangeToRemove);

You can find the related objects in the Supported by objects section below.

Parameters:

rangeToRemove

Required. Reference to a Range to remove from the current selection.

Return value:

This method has no return value.

Example HTML code 1:

This example shows how to add a new range to the selection:

<head>
    <script type="text/javascript">
        var mySelection, myRange;
        function AddToSelection () {
            if (window.getSelection) {  // all browsers, except IE before version 9
                mySelection = window.getSelection ();
                myRange = document.createRange ();
                myRange.selectNodeContents (document.getElementById ("myDiv"));

                mySelection.addRange (myRange);
            }
        }

        function DelFromSelection () {
            if (mySelection.removeRange) {  // Firefox, Opera, IE after version 9
                mySelection.removeRange (myRange);
            }
            else {
                if (mySelection.removeAllRanges) {      // Safari, Google Chrome
                    mySelection.removeAllRanges ();
                }
            }
        }
    </script>
</head>
<body>
    First Step: <button onclick="AddToSelection ();">Add Div to selection!</button>
    <br /><br />
    Second Step: <button onclick="DelFromSelection ();">Remove Div from selection!</button>
    <br /><br />
    <div id="myDiv">The target div.</div>
</body>