JS Removing elements from arrays

JavaScript
1

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?

3

Thanks for the tip and editing randelldawson!

5

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.