javascript execCommand('delete') not delete all selection div in chrome

问题

I try to write an editor with contenteditable & execCommand Everything works fine on Firefox, but in chrome has an error with 'delete' command.

Please view bellow photo:

This is my code:

var $obj = $('#myBlockDivId');
var selection = rangy.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
var range = rangy.createRange();
range.selectNode($obj[0]);
selection.addRange(range);
range.select();

when i console log: rangy.getSelection().toHtml() ==> it's right

but when i call:

document.execCommand("delete", null, false);

it's fine on Firefox but not right on Chrome, the wrapper div is not being deleted.

How can i fix this? I have to use execCommand because it's support undo and redo function. so, i can't use jquery or javascript dom selector to remove div.

(I bad at English, someone please edit my question for more clearly, many thanks)

回答1:

Maybe you can try to do :
(note the argument alone)

<span contentEditable>
	Select something here and after click on delete.
</span>
<input type="button" value="Delete selection" onclick="document.execCommand('delete')"/>

---

Acording to w3c.github.io on Enabled commands :

At any given time, a supported command can be either enabled or not. Authors can tell whether a command is currently enabled using queryCommandEnabled(). Commands that are not enabled do nothing, as described in the definitions of the various methods that invoke commands.

Some helpfull links :

w3c Unofficial Draft 15 October 2015:

• w3c execCommand
• w3c Deleting the selection
• w3C The delete command

Other ressources :

• List of contenteditable Browser Inconsistencies
• quirksmode.org test page

Hope this will help you !

回答2:

Try :

document.execCommand("delete", false, null);

Instead of :

document.execCommand("delete", null, false);

来源：https://stackoverflow.com/questions/33429105/javascript-execcommanddelete-not-delete-all-selection-div-in-chrome