Question

I have a contenteditable div, in which I have a span tag, which contains some text. How do I select the span tag and all of its contents, so when the user presses backspace or delete, the span and its contents get removed?

UPDATE: When I say select, I mean highlight. Sorry for the inconvenience.

UPDATE 2: I’m thinking along the lines of ‘element.outerHTML.select()’. See if that helps.

Answer 1

In Firefox you have the Selection API which allows you to do that. Combine it with the DOM2 Range API and you have what you want:

var r = document.createRange();
r.selectNode(domElement);
var s = window.getSelection();
s.removeAllRanges();
s.addRange(r);

The Selection API found its way in a future standard, HTML Editing APIs, but it will be a while until it becomes available in a majority of browsers.