В JS onclick=function срабатывает только один раз

Question

Есть ссылки:

<a href="" target="_blank">Ссылка 1</a>
<a href="" target="_blank">Ссылка 2</a>
<a href="" target="_blank">Ссылка 3</a>

При клике по первой ссылке открывается в новом окне, а сама ссылка должна удаляться. Для этого написал такой код:

document.querySelectorAll("a")[0].onclick=function(){this.remove();}

Получается такой ответ:

<a href="" target="_blank">Ссылка 2</a>
<a href="" target="_blank">Ссылка 3</a>

Все как нужно. Но при втором клике (по Ссылка 2) почему-то не действует.

Как делать так, чтобы клик срабатывал каждый раз?

Answer 1

А для чего там [0], по вашему? В JS счет начинается с нуля, а document.querySelectorAll возвращает нумерованный список элементов. К каждому из элементов можно обращаться через [номер]. Вы добавляли обработчик только на нулевой элемент.

Чтобы вручную это всё не писать, существуют циклы:

document.querySelectorAll("a").forEach(function(anchor) {
  anchor.addEventListener("click", function() {
    this.remove();
  });
})

<a href="#" target="_blank">Ссылка 1</a>
<a href="#" target="_blank">Ссылка 2</a>
<a href="#" target="_blank">Ссылка 3</a>

Или, классический:

let anchor = document.querySelectorAll("a");
for( let i = 0; i < anchor.length; i++ ) {
  anchor[i].addEventListener("click", function() {
    this.remove();
  });
}

http://learn.javascript.ru/
https://developer.mozilla.org/ru/

БЛОГ НА HUSL

В JS onclick=function срабатывает только один раз

Ответы (1 шт):