Deleting list of elements in Javascript

Question

Consider the following code. Inside of "videos_list" element i have a list of elements that i get in "couple" variable. I'm trying to remove all elements who have a attribute "ai" different of "list_couple"(to test i put only one element). The problem is, when he find the element, he doesn't delete the other elements after the found element.

Example to illustrate the idea: Consider the list ("x", "r", "t", "b", "h", "p") and the id="t".

What he is doing is ("_", "_", "t", "b", "h", "p").

He should do ("_", "_", "t", "_", "_", "_") or ("t").

Why the value of "i" is toggling between 0 and 1 after he finds the element? I see this with alert() function in the example. The problem is in "while" loop, i believe.

var clicked = 0;
var interval = setInterval(function( ) {

    var list_couple = new Array("2583521"),
    clicks = 1,
    videos = document.getElementById( "videos_list" ),
    couple = videos.getElementsByTagName( "a" );

    var i = 0;
    while( i < couple.length ) {
        var flag = 0;
        //alert(i);// To see the value of the i.
        for(j = 0; j < list_couple.length; j++) {
            if((couple[i].getAttribute( "ai" )) == list_couple[j]) {
                flag = 1;// Element found.
                i++;
                break;
            }
        }
        if( !flag ) {
            videos.removeChild( couple[i].parentNode );
        }
    }

    document.getElementById('btnMoreVideos').click();// Click on the button.
    clicked++;
    if(clicked >= clicks) {
        clearInterval( interval );
    }
}, 1000);

What am i doing wrong?

what you're doing wrong is that you're doing everything at the same time. separate all this in at least 3 functions with clean names and things should clarify by themselves. — GameAlchemist
– GameAlchemist, Commented Dec 2, 2013 at 14:48

nicosierra · Accepted Answer · 2013-12-02 14:53:46Z

1

I think your problem is because the i++ should go outside of your for statement.

while( i < couple.length ) {
    var flag = 0;
    //alert(i);// To see the value of the i.
    for(j = 0; j < list_couple.length; j++) {
        if((couple[i].getAttribute( "ai" )) == list_couple[j]) {
            flag = 1;// Element found.
            //i++;
            break;
        }
    }
    if( !flag ) {
        videos.removeChild( couple[i].parentNode );
    }
    i++;
}

answered Dec 2, 2013 at 14:53

nicosierra

1669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

megawac Over a year ago

Just a note, as I mentioned in my updated answer, there is a second problem as couple.length will change when nodes are removed

megawac · Accepted Answer · 2013-12-03 01:27:37Z

Update I just recalled this problem and realized there is another issue with your code snippet (which is also present in @nicosierra's answer). As you are removing nodes the couple node list will update as it is a live list. This will cause couple.length to decrease and some nodes to be skipped.

I suggest you consider using forEach and indexOf if you can rely on their support for the node and array iterating. This just iterates all of the anchors in couple and if the element has a matching ai attribute then it will remove the element from the videos parent. It won't matter if you update the list while iterating

var list_couple = ["2583521"],
    videos = document.getElementById( "videos_list" ),
    couple = videos.getElementsByTagName( "a" );

Array.prototype.forEach.call(couple, function(node) {//iterate node list
    if(list_couple.indexOf(node.getAttribute( "ai" )) >= 0) {
        videos.removeChild( node.parentNode );
    }
});

Or you can also just iterate the nodes backwards

for (var i = couple.length-1; i >= 0; i--) {
    if(list_couple.indexOf(couple[i].getAttribute( "ai" )) >= 0) {
        videos.removeChild( couple[i].parentNode );
    }
}

Collectives™ on Stack Overflow

Deleting list of elements in Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related