使用execCommand删除元素,使其可以撤消

Question

所以我试图在a中hover的元素上添加一个删除按钮contenteditable,然后单击删除按钮将删除该元素.现在,我有这样的事情:

button.on("click", function() {
  item.remove();
  button.hide(); 
}

不过,我想提出的去除可撤消,因此用户可以按command+z来undo删除.据我所知,您必须使用execCommand删除元素才能执行此操作(撤消的自定义解决方案不是一个选项).有没有办法以某种方式execCommand用来删除一个特定的节点(即使是一些不可选择的东西,比如一个节点iframe)？

Answer 1

有一个delete命令.您可以将选择设置为包含相关元素,调用命令并且它将是可撤消的,至少在以下简单示例中,该示例适用于我尝试过的所有浏览器:

function deleteElement(id) {
  var el = document.getElementById("toBeDeleted");
  var range = document.createRange();
  range.selectNode(el);
  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
  document.execCommand("delete", false, null);
}

  <input type="button" onmousedown="deleteElement('toBeDeleted'); return false" value="Delete">
  <div contenteditable="true">Use the button above to delete <b id="toBeDeleted">this bold text</b></div>