html添加删除元素属性,如何使用属性contentEditable删除div内的HTML元素？

因为要删除整个元素，这是更好地使contenteditable="false"，使浏览器不会让一元素的内容被删除。

然后你就可以按如下方式使用该属性在事件处理测试：在最新的Chrome版本

$('#editable').on('keydown', function (event) {

if (window.getSelection && event.which == 8) { // backspace

// fix backspace bug in FF

// https://bugzilla.mozilla.org/show_bug.cgi?id=685445

var selection = window.getSelection();

if (!selection.isCollapsed || !selection.rangeCount) {

return;

}

var curRange = selection.getRangeAt(selection.rangeCount - 1);

if (curRange.commonAncestorContainer.nodeType == 3 && curRange.startOffset > 0) {

// we are in child selection. The characters of the text node is being deleted

return;

}

var range = document.createRange();

if (selection.anchorNode != this) {

// selection is in character mode. expand it to the whole editable field

range.selectNodeContents(this);

range.setEndBefore(selection.anchorNode);

} else if (selection.anchorOffset > 0) {

range.setEnd(this, selection.anchorOffset);

} else {

// reached the beginning of editable field

return;

}

range.setStart(this, range.endOffset - 1);

var previousNode = range.cloneContents().lastChild;

if (previousNode && previousNode.contentEditable == 'false') {

// this is some rich content, e.g. smile. We should help the user to delete it

range.deleteContents();

event.preventDefault();

}

}

});