Как удалить html элемент с помощью javascript если у html элементов одинаковый класс?

Question

[Алексей Гончаров]

Есть такой html:

<ul class="us-footer-list">
       <li class="us-footer-item"><a href="/delivery" class="us-footer-link">qwe</a></li>
       <li class="us-footer-item"><a href="/pay" class="us-footer-link">qwe</a></li>
       <li class="us-footer-item"><a href="/vozvrat" class="us-footer-link">qweqwe</a></li>
       <li class="us-footer-item"><a href="/poshiv" class="us-footer-link">qwe</a></li>
       <li class="us-footer-item"><a href="/partners" class="us-footer-link">qwe</a></li>
       <li class="us-footer-item"><a href="/vakansii" class="us-footer-link">qwe</a></li>
       <li class="us-footer-item"><a href="/privacy" class="us-footer-link">qwe</a></li>
       <li class="us-footer-item"><a href="/oferta" class="us-footer-link">qwe</a></li>
</ul>

И мне надо с помощью чистого javascript удалить только первые 6 html li с классом us-footer-item. Проблема в том, что классы одинаковые и если обратиться к этому классу, то удалятся все li, а надо, чтобы удалились только первые 6. Как это сделать? Класс изменить нельзя. Нужно как-то по индексам что ли удалить. Но как это сделать?

Comments

[Kovalsky]

Ставят в тупик меня такие вопросы. Хотите удалить первые 6 элементов - выбираете нужные элементы, удаляете первые 6. Вы не знаете как обращаться к элементам массива по индексам? Вот так

[Алексей Гончаров]

Kovalsky, я знаю конечно, просто проблема в том что, это не массив а это html

[Алексей Гончаров]

Kovalsky, а можно так? querySelector(.us-footer-item[0])

[Kovalsky]

Алексей Гончаров, и от этого ничего не меняется - выбираете элементы, вместо Array получаете либо HTMLCollection либо NodeList, обращаетесь по индексам так же как это делаете в случае с Array

Или например отрезаете от полученной коллекции элементов кусок из шести элементов, проходитесь по нему циклом

"а можно так?" - откройте консоль, проверьте. Например здесь же, на тостере. Это займет несколько секунд

[Алексей Гончаров]

Kovalsky, html collection не подходит для этих целей. Она же может только хранить

[Алексей Гончаров]

Kovalsky, а что проще нельзя это сделать с querySelector?

[Kovalsky]

Алексей Гончаров, способ получения элементов не играет никакой роли абсолютно, используйте вообще любой. Способ хранения тоже: HTMLCollection, NodeList - не важно

Вам же нужно получить 6 элементов, да? Значит querySelector не подойдет, тк он вернет вам ровно 1 (один) элемент

[Алексей Гончаров]

Kovalsky, а как подключиться тогда к самому первому элементу к примеру с классом .asd а таких классов сто?

[Kovalsky]

Алексей Гончаров, выбрать его одним из существующих способов - https://learn.javascript.ru/searching-elements-dom

[Алексей Гончаров]

Kovalsky, а к htmlcollection добавить первые шесть нельзя чтобы потом их удалить...

[Kovalsky]

Алексей Гончаров, я не понимаю что значит эта фраза и что куда вы добавлять хотите. Смотрите: идёте по ссылке выше, смотрите какие существуют способы выбора элементов из DOM, используете понравившийся. Получаете список элементов: Array или HTMLCollection или NodeList, не важно. Удаляете нужные элементы: либо удаляете первые 6 элементов обращаясь прямо по индексам, либо отрезаете от исходного списка слева кусок длиной в 6 элементов и циклом (например с помощью forEach) удаляете каждый

Я надеюсь то что между удалением из DOM и удалением из списка есть разница это достаточно очевидно. Вам нужно удалить элементы из DOM, не из массива, поэтому способ получения и хранения элементов не имеет значения

[Алексей Гончаров]

Kovalsky,

let elements = document.querySelectorAll('ul > li:nth-child(1)');
elements.remove();

я попробовал это не помогло, почему? Это я узнал в вашей ссылке и это не сработало

[Алексей Гончаров]

Kovalsky, там не какой не подходит для моих задач, это странно неужели не придуман способ нормальный для решения такой задачи

[Kovalsky]

Алексей Гончаров, в тексте ошибки описано почему она возникла, почитайте

"там не какой не подходит для моих задач, это странно неужели не придуман способ нормальный" - там абсолютно все подходят, включая querySelectorAll. Вы посмотрите примеры по ссылке, там их достаточно. Первый же пример из статьи для querySelectorAll вам подойдёт

[Алексей Гончаров]

Kovalsky, я понял просто мне надо было изменить свой тип мышления. Но так как я тупой и это у меня не получилось как всегда без посторонней помощи.

[Алексей Гончаров]

Kovalsky, хоть даже если я практиковал циклы изучал их похоже я все таки не научусь

Answer 1

[WapSter]

Это же простейший код, в сети куча примеров.

Comments

[Алексей Гончаров]

нечего себе да вы просто гуру в программировании а еще называете себя не программистом