如何解决 IE/Edge 中损坏的 removeAttribute？答案

【问题标题】：How to work around the broken removeAttribute in IE/Edge?如何解决 IE/Edge 中损坏的 removeAttribute？
【发布时间】：2019-03-17 17:04:00
【问题描述】：

我正在尝试记住 contenteditable 块中选择或多选表单元素的选定项。对于 Firefox 和 Chrome，我只记得选定的项目，删除 selected 属性并标记应该具有它的那些。正常的 DOM 序列化会处理剩下的事情。尝试用 IE 或 Edge 来做这件事很糟糕，因为它根本不起作用。下面是一个小测试用例：

<!DOCTYPE html>
<html>
<body>
  <select multiple>
    <option id="op1" selected value="1">1</option>
  </select>
  <button onclick="var op1 = getElementById('op1'); op1.removeAttribute('selected'); alert(op1.outerHTML);">Test </button>
</body>
</html>

有没有人有一种方法可以工作，而无需克隆具有该属性的选项并用它们替换当前节点？目标是 IE 8+ 和 Edge；旧的 IE 不感兴趣。

【问题讨论】：

你能试试op1.selected = false吗？它似乎有效，但不知何故，用户界面只在为我悬停选择框后更新......
这有点帮助。 IE 11 删除了该属性，Edge 没有。我记得之前尝试过，但只在 Edge 中。
你试过op1.selected = false吗？鉴于该属性初始化了属性，但没有更新以反映用户交互期间/之后元素的当前状态，我想这是在这种情况下要走的路。

标签： javascript internet-explorer dom microsoft-edge

【解决方案1】：

根据user3297291的建议，后续搜索发现Issue #12087679 for Edge。整合其中的建议可以得到以下内容，适用于所有 IE11、Edge、Chrome 和 Firefox：

<!DOCTYPE html>
<html>
<body>
  <select multiple>
    <option id="op1" selected value="1">1</option>
  </select>
  <button onclick="var op1 = getElementById('op1');
                   op1.setAttribute('selected', false);
                   op1.selected = false;
                   op1.removeAttribute('selected');
                   alert(op1.outerHTML);">Test </button>
</body>
</html>

首先，明确确保属性是布尔值，默认不是（Edge bug）。接下来，禁用该属性以使 Microsoft 浏览器也删除该属性。最后，删除实现 DOM 级别 1 的其他世界的属性。

【讨论】：

太棒了！刚刚从积压中清除了十几个特定于 Edge 的错误。
嗯。在我麻烦地从 caniuse 链接到那个 MS 问题 (#12087679) 之后，MS 已经离开并删除了该页面，所以它现在是 404！我认为这是因为他们已切换到闪烁/铬，并且该错误将“消失” - 但我认为该错误仍将存在于 IE 和未更新的 Edge 安装中。谁能澄清一下？