Удаление списка элементов в Javascript

Question

Рассмотрите следующий код. Внутри "videos_list" элемент i имеет список элементов, которые я получаю в переменной «пара». Я пытаюсь удалить все элементы, у которых есть атрибут "ai", отличный от "list_couple" (для проверки я ставлю только один элемент). Проблема в том, что когда он находит элемент, он не удаляет остальные элементы после найденного элемента.

Пример, иллюстрирующий идею: Рассмотрим список ("x", "r", "t", "b", "h", "p") и id="t".

Что он делает, это ("_", "_", "t", "b", "h", "p").

Он должен сделать ("_", "_", "t", "_", "_", "_") или ("t").

Почему значение «i» переключается между 0 и 1 после того, как он находит элемент? Я вижу это с помощью функции alert() в примере. Я считаю, что проблема в цикле «while».

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

Что я делаю неправильно?

Answer 1

Обновление Я только что вспомнил эту проблему и понял, что есть еще одна проблема с вашим фрагментом кода (который также присутствует в ответе @ nicosierra). Когда вы удаляете узлы, список узлов couple будет обновляться, так как находится в реальном времени . Это приведет к уменьшению couple.length, а некоторые узлы будут пропущены.

Предлагаю вам использовать forEach и indexOf, если вы можете положиться на их поддержку для итерации узла и массива. Это просто выполняет итерации всех якорей в couple, и если элемент имеет соответствующий атрибут ai, он удаляет элемент из родителя videos. Это не имеет значения, если вы обновляете список, пока переборе

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

Или вы можете просто перебирать узлы назад

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

Answer 2

Я думаю, ваша проблема, потому что я ++ должен идти за пределами вашего, заявление ,

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++; 
}