JS Removing elements from arrays

Greetings fellow campers!

First time posting here so apologies if I’m not in the correct place or if I’m asking something that has been answered already. I’m very much a newbie. I’ve been breaking my head and going back and forth on how to remove an element that lives in Array 1 and remove that element from Array 2. Essentially everything that is in Array 1 if it’s present, remove from Array 2 and leave everything else in Array 2 intact. This is my code so far:

(function getElems() {
  var noRoleElements = ["abbr", "address", "audio", "b", "base", "bdi", "bdo", "blockquote", "br", "canvas", "caption", "cite", "code",
  "col", "colgroup", "data", "del", "details", "dfn", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "head", "html",
  "i", "iframe", "ins", "kbd", "label", "legend", "link", "map", "mark", "meta", "meter", "noscript", "object", "p", "param", "picture",
  "pre", "q", "rp", "rt", "ruby", "s", "samp", "script", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "svg",
  "template", "time", "title", "track", "u", "var", "video", "wbr"];

  var elemArray = Array.from(document.body.getElementsByTagName("*"));

  for(var i = 0; i < noRoleElements.length; i++) {
    var elems = document.body.getElementsByTagName(noRoleElements[i]);
    elems = Array.from(elems);

    for(var x = 0; x < elems.length; x++) {
    var noRoleElem = elems[x];

      for(var j = 0; j < elemArray.length; j++) {
      var roleElem = elemArray[j];

    if(noRoleElem == roleElem) {
      var elemPos = elemArray.indexOf(roleElem);
      elemArray.splice(elemPos, 1);
    return elemArray;


noRoleElements is array with strings which I’ll loop through to get the respective elements from the document script is applied to…this gives me a (live) HTMLCollection which I convert into elems array.

elemArray is array of all elements within the document that script is applied to so whatever is present in noRoleElements will be present in elemArray.

I loop through elems array to get each element, then loop through elemArray to see if the two elements match. If they match get the index of matching element from elemArray, then splice from elemArray

Return elemArray, which I’d hoped would not have the elements from noRoleElements array but it’s not working. It still returns complete elemArray, nothing is removed. Can anyone suggest any tips?

Welcome to the forum!

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


Thanks for the tip and editing randelldawson!

Did you find a solution to your problem or do you still need some help? If so, do you have a sample of the html file you are running this code against?

I’m still tinkering with it but not solved yet. This is only part of my code. The rest of the code seems to work. Part of the function of the code is to highlight certain elements in the DOM but because I have not been able to cut out the elements of the noRoleElements array from the elemArray everything highlights, which is not desired. I didn’t expect this bit to cause so much head-scratching. FYI: I can’t use a library either…no jQuery, underscore, etc.

This is meant to run against any html file. Currently I’ve been running it on the console against whatever page is open but google.com is one I’ve used often. Thanks for your concern/interest. I’ll keep at it and hopefully I’ll crack it or get some help here.