Horje
Web API Selection.removeRange() Method

The Web Selection API gives developers the ability to recognize the screen regions that the user has now selected and to use code to initiate user selections. The Selection.removeRange() method removes a range from a selection.

Syntax:

removeRange(range);

Parameters: This method has one parameter only.

  • range:  A range object that will be removed from the selection.

Return value: This method returns undefined.

Example 1: The following code adds some texts and removes the selection by using the removeRange() method.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <script>
        var myRange, selection;
        function Add() {
            selection = window.getSelection();
            myRange = document.createRange();
            myRange.selectNodeContents(
                document.getElementById("data"));
            selection.addRange(myRange);
        }
        function remove() {
            selection.removeRange(myRange);
        }
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3> Web API selection removeRange method</h3>
    <h2 id="data"> Select this Text</h2>
    <button onclick="Add();">Add Selection</button>
    <button onclick="remove();">Remove Selection</button>
</body>
  
</html>

Output:

 

Example 2: The following code selects some texts by using the selectNodeContents() method and removes the selection by using the removeRange() method.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        h2 {
            display: inline-block;
        }
    </style>
    <script>
        var myRange, selection;
        function Add() {
            selection = window.getSelection();
            myRange = document.createRange();
            myRange.selectNodeContents(
                document.getElementById("data"));
            selection.addRange(myRange);
        }
        function remove() {
            selection.removeRange(myRange);
        }
  
    </script>
</head>
  
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3> Web API selection removeRange method</h3>
    <div>
        <h2 id="data"> Select this Text </h2>
        <h2> | This text not selecting</h2>
    </div>
    <div>
        <button onclick="Add();">Add Selection</button>
        <button onclick="remove();">Remove Selection</button>
    </div>
</body>
  
</html>

Output:

 

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Selection/removeRange


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
D3.js D3.js
How to store an array in localStorage ? How to store an array in localStorage ?
How to create a Rotating Spiral Animation Effect using p5.js ? How to create a Rotating Spiral Animation Effect using p5.js ?
How to Design a Simple Calendar using JavaScript ? How to Design a Simple Calendar using JavaScript ?
Web API Selection addRange() Method Web API Selection addRange() Method

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 11



 

Horje