0

Есть ссылки:

<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) почему-то не действует.

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

1
  • очевидно привязаться к onclick у всех ссылок, а не только у первой.
    – Bulson
    17 июн 2020 в 22:09

1 ответ 1

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/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.