javascript - 删除父元素和所有不工作的子元素

Question

我正在开发一个供我自己使用的插件，我想摆脱出现在顶部的所有烦人的 WordPress 消息，包括更新、错误、信息等。鉴于插件的菜单页面是由php 中，我尝试使用 php 代码删除这些消息，根据我的研究，该代码是这样的:

function remove_core_updates(){

    global $wp_version;return(object) array('last_checked'=> time(),'version_checked'=> $wp_version,);

}

add_filter('pre_site_transient_update_core','remove_core_updates');
add_filter('pre_site_transient_update_plugins','remove_core_updates');
add_filter('pre_site_transient_update_themes','remove_core_updates');

我将其添加到我的插件 php 文件的顶部，并且应该删除通知，但某些插件的错误消息仍然出现。除此之外，上面的代码删除了我在仪表板中访问的所有菜单页面的更新通知。这是我不想要的。

作为解决方法，我编写了一个函数来执行我想要的操作:

function remove_wp_messages(selector) {

    var child = document.querySelector(selector),
        parent = child.parentNode,
        index = Array.prototype.indexOf.call(parent.children, child);

    for (var i = 1; i < Number(index + 1); i++) {

        var elements = document.querySelector("#wpbody-content > :nth-child(" + i + ")");

        while (elements.firstChild) {

            elements.removeChild(elements.firstChild);
            elements.style.display = "none";

        }
    }
}

window.onload = remove_wp_messages("#wpbody-content > link");

鉴于我添加到菜单页面的第一个 html 元素是指向外部样式表的链接，上面的 javascript 函数返回该link的索引，并删除元素中直到link的所有子节点，从而形成循环。问题是，我不仅想删除子元素，还想删除父元素，这相当于删除插件内容上方的通知。我尝试更换:

elements.style.display = "none";

这样:

elements.remove();

运气不好。我不明白的是，父元素被隐藏，但我用 remove() 替换它，它删除了我的内容而不是通知。为什么？我愿意接受 php 和 javascript 的建议。

<小时/>

解决方案

根据@PetrSr的回答，我的代码现在看起来像这样:

function remove_wp_messages(selector) {

    var child = document.querySelector(selector),
        parent = child.parentNode,
        index = Array.prototype.indexOf.call(parent.children, child);

    for (var i = Number(index); i > 0; i--) {

        document.querySelector("#wpbody-content > :nth-child(" + i + ")").remove();

    }
}

非常简单。

Answer 1

像这样向后循环元素应该可以解决您的问题:

for (var i = Number(index); i > 0; i--) {
  //your code
}

按照您的方式删除 DOM 元素时不能向前循环，因为删除 element1 后，element2 会成为第一个元素。如果随后删除第二个元素，则实际上删除了最初的 element3。等等