JAVASCRIPT - HOW TO Delete/Remove Selected Text - Javascript Source Code

JAVASCRIPT - HOW TO Delete or Remove Selected Text when Text on a Web Page is Selected and the Delete Key is Pressed

Function to deleted selected text on a web page when the DELETE key is pressed. This allows you to systematically deleted selected text anywhere on the web page thus changing the appearance of the web page.

To delete selected text on a web page when the delete key is press involves ...

1. Creating an event listener that listens for a keydown event.
2. The event function checks to see if the key that was pressed is the DELETE key.
3. If the DELETE key was pressed, the function then checks to see if any text on the web page is selected. If text on the web page is selected, the function ...
   1. Gets the parent element of the selected text.
   2. Gets the entire text content of the parent element.
   3. Replaces the select text with an empty string, in essence, subtracting the selected text from the whole text of the parent element.
   4. The text content of the parent element of the selected text is set to this new text, with the selected text removed.

Deleting selected text when the DELETE key is pressed sounds more complicated than it really is.

Function to Check for when Delete Key is Pressed

window.addEventListener('keydown', function (e){ // IF THE KEY PRESSED IS DELETE KEY if(e.key.toLowerCase() == 'delete'){ // EXECUTE CODE THAT DELETES SELECTED TEXT funcDelSelText(); } }, false);

Function to Determine what the Selected Text is and Remove it

To properly and consistenty get the selected text we want to be sure we use Javascript methods that are supported across all devices.

function funcSelectedText(){ if (window.getSelection){ return window.getSelection(); }else if (document.getSelection){ return document.getSelection(); }else if (document.selection){ return document.selection.createRange().text; }else return; }

Code to Remove or Delete the Selected Text from the Entire Text of the Parent Object of the Selected Text

function funcDelSelText(){ // PLATFORM INDEPENDANT FUNCTION TO GET SELETED TEXT let selText = funcSelectedText(); // GET THE PARENT ELEMENT OF THE OBJECT OF THE SELECTED TEXT let selObj = selText.anchorNode.parentElement; // GET THE ENTIRE TEXT OF THE OBJECT OF THE SELECTED TEXT let entireText = selObj.textContent; // SUBTRACT THE SELECTED TEXT FROM THE ENTIRE TEXT OF THE OBJECT OF THE SELECTED TEXT let removedText = entireText.replace(selText, ''); // SET THE TEXT OF THE PARENT OBJECT OF THE SELECTED TEXT TO THIS NEW TEXT, WITH DELETED TEXT REMOVED selObj.textContent = removedText; }

Complete Code to Remove Selected Text when Delete Key Pressed

function funcDelSelText() { let selText = funcSelectedText(); let selObj = selText.anchorNode.parentElement; let entireText = selObj.textContent; let removedText = entireText.replace(selText, ''); selObj.textContent = removedText; } function funcSelectedText(){ if (window.getSelection){ return window.getSelection(); }else if (document.getSelection){ return document.getSelection(); }else if (document.selection){ return document.selection.createRange().text; }else return; } window.addEventListener('keydown', function (e) { if(e.key.toLowerCase() == 'delete'){ funcDelSelText(); } }, false);

Try Deleting Selected Text on this Page

Select any text on this page and press the DELETE key to see this delete selected text code for yourself. Feel free to right click the web page and view the Javascript source code.