JS - Removing Elements from Array (Issues using Splice)

Question

I'm working to build a edit viewer for my personal website. I have an array which I use to gather all of the textboxes/textareas from the page (based on their class). Then through the usage of buttons I let the user move from edit to edit. When a button is pressed I need to iterate through the array of "edited" objects.

Using the great tips I found on a previous Overflow thread, I'm looping from the top of the array back through. However, I am having an issue with an error "myFunc error = TypeError: Object doesn't support property or method 'splice'". What have I done incorrectly?

var editsArray = document.getElementsByClassName("recent_change");

    // go backwards through the array
    for(var i = editsArray.length -1; i >= 0 ; i--){
        // check to ensure it is not a 'problem_box'
        if(editsArray[i].name == 'problem_box'){
            // remove that item from array
            editsArray.splice(i, 1);
        }
    }

I know that my way of collecting elements into the array works as my code to iterate through these edits was previously working. I'm just going back now to "clean up" what is gathered into my array and am running into the error mentioned above.

I am not wanting remove the objects collected from the actual page, I am simply wanting to remove the reference to those objects out of my array.

Try this ► `var actualArray = [].slice.call(editsArray);` , taken from [this post](http://stackoverflow.com/questions/222841/most-efficient-way-to-convert-an-htmlcollection-to-an-array) then change your code to process the `actualArray` instead. That might work. — Nope, Dec 01 '16 at 15:54
Or the new [`Array.from(editsArray)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from). You can use [`.filter()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) too. `editsArray = Array.from(editsArray).filter(function(el) { return el.name != 'problem_box' })` — , Dec 01 '16 at 15:56
@François Wahl :: In the context of the above loops, would that method of removal actually work? There could be scenarios where we may need to enter that if statement more than once. — TheSquareCircle, Dec 01 '16 at 16:11
@squint Using your suggestion I've done this, renaming the from "editsArray" variable to something including "collection" to be proper. var allEditsArray = Array.from(collectionUnclean).filter(function(el) { return el.name != 'problem_box' }) When doing this I'm getting an error "object doesn't support property or method 'from' " — TheSquareCircle, Dec 01 '16 at 16:19
@TheSquareCircle: See the docs link. It's a pretty new method, but can be patched using the polyfill in the docs. Otherwise, just use the `[].slice.call(...)` way noted in another comment. — , Dec 01 '16 at 16:41

score 2 · Answer 1 · answered Dec 01 '16 at 15:59

const editsArray = Array.from(document.getElementsByClassName("recent_change")).
                     filter((node) => node.name !== 'problem_box')

If You can't use ES6, replace Array.from with Array.prototype.slice, and arrow function with normal function.

JS - Removing Elements from Array (Issues using Splice)

1 Answers1