Ava Barbilla Ava Barbilla - 6 months ago 13
Javascript Question

Remove parent and all child elements not working

I am developing a plugin for my own usage, and I want to get rid of all the annoying wordpress messages that appear on top including updates, errors, info, etc. Given the obvious fact that the plugin's menu page is generated by php, I tried removing these messages with a php code which according to my research is this:

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');


I added this at the top of my plugin php file and should remove the notifications, but the error message for some plugins still appear. Apart from this, the code above removes the update notification for all menu pages I access in my dashboard. This I do not want.

As a workaround, I wrote a function which does what I want:

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");


Given that the first html element I add to the menu page is a
link
to an external stylesheet, the javascript function above
returns
the index of that
link
and removes all child nodes from the elements up to the
link
, hence the loop. Here is the issue, I want to not only remove the child elements but the parents as well which would be equivalent to removing the notifications above the content of my plugin. I tried replacing:

elements.style.display = "none";


With this:

elements.remove();


No luck. What I do not understand is, that the parent elements get hidden, but I replace it with
remove()
it removes my content instead of the notifications. Why? I am open to both php and javascript suggestions.




SOLUTION

According to @PetrSr answer, my code now looks like this:

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();

}
}


Pretty straightforward.

Answer

Looping through the elements backwards like this should fix your issue:

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

You cannot loop forward when removing DOM elements the way you did, because after removing element1, element2 becomes the first one. If you then remove the second element, you are in fact removing what was originally element3. Etc.