javascript - :empty Selector Not Being Updated When Children Added in IE11 的解决方法

Question

我有一个简单的 css 语句，我想将其应用于一些 HTML，这些 HTML 基本上只在其前一个兄弟元素不为空时显示一个元素。用例是仅当列表中包含元素时才显示“清除”按钮。

<ul></ul>
<button>Clear</button>

ul:empty + button
{
    display: none;
}

问题是，每当我的 javascript 向列表中插入一个新的列表项时，Chrome 似乎都能正常工作并自动使按钮可见。然而，IE11 无法显示清除按钮。这个 JS fiddle 说明了这个问题:http://jsfiddle.net/xw4nbnz3/

要使 ie11 正常工作，解决此问题的最简单方法是什么？最好只使用 CSS。

Answer 1

很确定我以前见过这个，但我找不到以前的问题了，所以我会尝试一下。

这看起来像是一个典型的重绘错误:IE 会很好地理解您的 CSS...如果列表以元素开头，并且如果您编写一个函数来清空列表，它也不会更新按钮。不幸的是，重绘错误并不以具有纯 CSS 解决方法而闻名。

幸运的是，他们通常不需要它们。由于这只会在您更改 DOM 时发生，因此您可以在 JS 中轻松解决此问题，并且不需要很多行。看起来像是先删除列表本身，然后再插入新元素，然后将列表放回 resolves this issue whilst not creating any problems in other browsers :

function AddListItem()
{
    var mylist = document.getElementById("mylist");
    if (!mylist)
        return;

    var parent = mylist.parentElement;
    var button = mylist.nextElementSibling;
    parent.removeChild(mylist);

    var li = document.createElement("li");
    li.appendChild(document.createTextNode("Hello, world!"));
    mylist.appendChild(li);

    parent.insertBefore(mylist, button);
}

在 Windows 7、Windows 8.1 和 Windows 10 RTM(内部版本 10240)上的 IE11 以及 Windows 10 RTM 上的 Microsoft Edge 上进行了测试。请注意，在插入元素之后删除列表(就在将其放回之前)不起作用；您需要先将其删除。